vue 列表|表格环境中的下拉菜单

news2024/11/28 6:25:07

elementui组件为vue提供了各式各样的ui组件，但均为各类最为基本的控件，没有提供业务级的使用案例，为此进行扩展补充。
vue-elementui 基本入门使用

一、下拉菜单

下拉菜单与html中的select控件有所差距，select为表单控件的一员页面效果类似于输入框，而下拉菜单为功能设置控件。

select控件的使用可以参考：https://element.faas.ele.me/#/zh-CN/component/select

1.1 基本使用

elementui组件中下拉菜单的详细使用介绍如下：
https://element.faas.ele.me/#/zh-CN/component/dropdown

下拉菜单的控件名称为el-dropdown，关于下拉列表所有的属性事件都应该设置在此。其子控件span为收缩后所显示的内容，el-dropdown-menu子控件为展开后显示的内容。关于具体的页面效果，则要设置到具体控件上。

从以下代码可以看出，设置el-dropdown的trigger=“click”，则使下拉菜单在点击后激活。

<el-row class="block-col-2">
  <el-col :span="12">
    <span class="demonstration">hover 激活</span>
    <el-dropdown>
      <span class="el-dropdown-link">
        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
        <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-col>
  <el-col :span="12">
    <span class="demonstration">click 激活</span>
    <el-dropdown trigger="click">
      <span class="el-dropdown-link">
        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
        <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-col>
</el-row>

<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
</style>

页面效果如下，当鼠标触发相应事件（hover|鼠标覆盖、click|鼠标单击）后，下拉菜单显示。
在这里插入图片描述

1.2 属性介绍

不隐藏展开后的下拉框

下拉菜单默认在点击菜单项后会被隐藏，将el-dropdown的hide-on-click属性默认为false可以关闭此功能。

下拉框选中事件

这其实是指令事件，通过将事件函数绑定到el-dropdown 的command属性实现，当用户选择相应的选项后则将对应的command值传递给事件函数

<el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="a">黄金糕</el-dropdown-item>
    <el-dropdown-item command="b">狮子头</el-dropdown-item>
    <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
    <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
    <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

<script>
  export default {
    methods: {
      handleCommand(command) {
        this.$message('click on item ' + command);
      }
    }
  }
</script>

这里的事件函数为handleCommand，通过对command进行判断来区分用户输入。

二、列表环境的下拉菜单

2.1 列表使用

在vue中展示数据时经常出现列表，在单元容器上使用v-for即可实现循环，然后实现列表展示。

<template>
  <div class="demo-image"

  v-loading="loading"
  element-loading-text="等待服务器处理中"
  element-loading-spinner="el-icon-loading"
  element-loading-background="rgba(0, 0, 0, 0.8)"
 >
    <div class="block" v-for="fd in folder_data">
      <el-card :body-style="{ padding: '0px' }">
        <div class="folderImg" :class="fd.type" >
          <i class="el-icon-folder-opened avatar-uploader-icon"></i>
        </div>
      </el-card>
    </div>

  </div>
</template>
  
<script>

import axios from 'axios'
export default {
  name: 'showdatafolder',
  inject: ['reload'],
  data() {
    return {
      folder_data: [],
      loading: false,
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    }
  },
  mounted() {
    axios({
      url: '/api/datamanage_get_folder_list',
      method: "get",
    }).then((res) => {
      this.folder_data=res.data;
    });
  },
}
</script>

2.2 列表堆叠的下拉菜单

在vue中，任何控件所所绑定的事件是设置为变量的，故此在v-for中产生的多个el-dropdown只能绑定到同一个事件。虽然el-dropdown绑定的事件是固定的，但是每个for循环中el-dropdown-item所绑定的command可以是动态的，其支持将for训练时的变量信息与字符串相结合。
具体用例如下：

<template>
  <div class="demo-image"

  v-loading="loading"
  element-loading-text="等待服务器处理中"
  element-loading-spinner="el-icon-loading"
  element-loading-background="rgba(0, 0, 0, 0.8)"
 >
    <div class="block" v-for="fd in folder_data">
      <el-card :body-style="{ padding: '0px' }">
        <div class="folderImg" :class="fd.type" @click="to_url('showimglist',fd.name)">
          <i class="el-icon-folder-opened avatar-uploader-icon"></i>
        </div>
        <div style="padding: 4px;">
          <time class="time">{{ fd.name }}</time><br />
          <span>数量: {{ fd.labelnum }} / {{ fd.imgnum }} </span>

          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="'image_resize|' + fd.name" icon="el-icon-picture">图像resize</el-dropdown-item>
              <el-dropdown-item :command="'split_dataset|' + fd.name" icon="el-icon-help">划分数据集</el-dropdown-item>
              <el-dropdown-item :command="'data_analysis|' + fd.name" icon="el-icon-s-tools">数据集分析</el-dropdown-item>
              <el-dropdown-item :command="'draw_label|' + fd.name" icon="el-icon-s-tools">数据可视化</el-dropdown-item>
              <el-dropdown-item :command="'delete_label|' + fd.name" icon="el-icon-s-tools">删除可视化</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <div class="bottom clearfix">
            <el-button type="text" class="button"  @click="to_url('labelimg',fd.name)" >标注</el-button>
            <el-button type="text" class="button" @click="delete_folder(fd.name)">删除</el-button>
          </div>
        </div>
      </el-card>
    </div>

  </div>
</template>
  
<script>

import axios from 'axios'
export default {
  name: 'showdatafolder',
  inject: ['reload','callServerApi'],
  data() {
    return {
      folder_data: [],
      loading: false,
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    }
  },
  mounted() {
    axios({
      url: '/api/datamanage_get_folder_list',
      method: "get",
    }).then((res) => {
      this.folder_data=res.data;
    });
  },
  methods: {
    handleCommand(command) {
      var list = command.split("|");
      var func = list[0];
      var dataset = list[1];
      if (func == 'image_resize') {
        this.callServerApi('datamanage_resize_img',{dname:dataset})
      } else if (func == 'split_dataset') {
        this.callServerApi('datamanage_splitdata',{dname:dataset})
      } else if (func == 'draw_label') {
        this.callServerApi('datamanage_dataanalysis',{dname:dataset,viewdata:true,target:'showimglist'})
      } else if (func == 'data_analysis') {
        this.callServerApi('datamanage_dataanalysis',{dname:dataset,target:'showanalysis'})
      } else if (func == 'delete_label') {
        this.callServerApi('datamanage_dataanalysis',{dname:dataset,clear:true})
      }
    },
  },
}
</script>

关键操作如下，每个el-dropdown-menu中子控件所绑定的事件存在同异性，相同顺序的el-dropdown-item中command指令的前部分是一样，后部分不同；同一个for循环中的el-dropdown-item中的command的后部分是相同。也就是说一个command指令中包含了指令和父控件信息，通过 | 分割原始指令后即可得到指令和操作对象信息

<div class="block" v-for="fd in folder_data">
	<el-dropdown @command="handleCommand">
       <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
       </span>
      <el-dropdown-menu slot="dropdown">
		<el-dropdown-item :command="'data_analysis|' + fd.name" icon="el-icon-s-tools">数据集分析</el-dropdown-item>
		<el-dropdown-item :command="'data_split|' + fd.name" icon="el-icon-s-tools">数据集划分</el-dropdown-item>
	  </el-dropdown-menu>
</div>

基于此所实现的指令事件如下，先对原始指令进行分割，设定第一部分为指令内容，第二部分为操作对象。基于此可以区分出列表堆叠时各个下拉菜单要操作的对象。

    handleCommand(command) {
      var list = command.split("|");
      var func = list[0];
      var dataset = list[1];
      if (func == 'image_resize') {
        this.callServerApi('datamanage_resize_img',{dname:dataset})
      } else if (func == 'split_dataset') {
        this.callServerApi('datamanage_splitdata',{dname:dataset})
      } else if (func == 'draw_label') {
        this.callServerApi('datamanage_dataanalysis',{dname:dataset,viewdata:true,target:'showimglist'})
      } else if (func == 'data_analysis') {
        this.callServerApi('datamanage_dataanalysis',{dname:dataset,target:'showanalysis'})
      } else if (func == 'delete_label') {
        this.callServerApi('datamanage_dataanalysis',{dname:dataset,clear:true})
      }
    },

最终所实现的业务界面效果如下
在这里插入图片描述

三、表格中的下拉菜单

3.1 表格使用

在表格中基于 <template slot-scope="scope"> xxx </template>格式可以指定格式化的内容，具体可以参考https://element.faas.ele.me/#/zh-CN/component/table 中的自定义列模板

这里的el-dropdown-item的:command设置与章节2类似，将额外信息通过 | 连接。不同的是使用了v-for来生成多个el-dropdown-item。以下代码中，切换类型所绑定的事件为changeTableLabel事件

        <el-table :data="tableData" height="600" style="width: 150px" highlight-current-row
          @current-change="handleTableCurrentChange">
          <el-table-column type="index" label="编号" width="40">
          </el-table-column>
          <el-table-column prop="label" label="类型" width="110" align="center">
            
            <template slot-scope="scope">
              <el-dropdown @command="changeTableLabel">
                <span class="el-dropdown-link">
                  {{ scope.row.label }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="tag in dynamicTags" :command="scope.row.id + '|' + tag">{{ tag
                  }}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

              <el-button @click="deleteTableRow(scope.row.id)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

3.2 事件实现

在changeTableLabel函数中，对参数进行split操作，从一个参数中解析出多个信息。其第一个信息用于描述操作的行，第二个信息用于描述所设置的值。

    //修改table中label的值
    changeTableLabel(command) {
      var list = command.split("|");
      var tagId = list[0];//获取参数中的第一个信息 用于区分操作的行
      var newCls = list[1];//获取参数中的第二个信息  用于设置具体的值
      //使用信息
      //更新表格中的label值
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].id == tagId) {
          this.tableData[i].label = newCls;
        }
      }
      this.label_changed = true;
      //更新ailabel中绘图中的类型和颜色
      this.$message(tagId + '  ---  ' + newCls);
    }

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/843872.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

python 输入oracle sql查询语句导出excel表

python 输入oracle sql查询语句导出excel表

Author: liukai 2810248865qq.com Date: 2022-08-18 04:28:52 LastEditors: tkhywang 2810248865qq.com LastEditTime: 2023-08-02 18:27:08 FilePath: \PythonProject02\python 连接oracle数据库导出Excel带数据库表头.py Description: 这是默认设置,请设置customMade, 打开ko…
阅读更多...
汇川伺服常见故障处理

汇川伺服常见故障处理

伺服系统故障拓扑图 Er.941 变更参数需重新上电生效 产生机理：伺服驱动器的功能码属性“生效时间”为“再次通电”时，该功能码参数值变更后，驱动器提醒用户需要重新上电。 原因 确认方法 处理措施 变更了再次通电后更改生效的功能码 确认是否更改了“生效时间”为“重新上电…
阅读更多...
C++：模拟实现string类

C++：模拟实现string类

文章目录 Iterator类capacity类Element access 类Modifiers类String operations类类外成员函数头文件总括 本篇主要介绍模拟实现string类&#xff0c;string中有相当多的内容&#xff0c;这里实现一些相对用途广泛的场景 先看要实现的内容有哪些&#xff1a; 上图源于cplusplu…
阅读更多...
认识所有权

认识所有权

专栏简介&#xff1a;本专栏作为Rust语言的入门级的文章&#xff0c;目的是为了分享关于Rust语言的编程技巧和知识。对于Rust语言&#xff0c;虽然历史没有C、和python历史悠远&#xff0c;但是它的优点可以说是非常的多&#xff0c;既继承了C运行速度&#xff0c;还拥有了Java…
阅读更多...
从零构建深度学习推理框架-4 框架中的算子注册机制

从零构建深度学习推理框架-4 框架中的算子注册机制

今天要讲的这一注册机制用到了设计模式中的工厂模式和单例模式&#xff0c;所以这节课也是对两大设计模式的一个合理应用和实践。KuiperInfer的注册表是一个map数据结构&#xff0c;维护了一组键值对&#xff0c;key是对应的OpType&#xff0c;用来查找对应的value&#xff0c;…
阅读更多...
断路器分合闸线圈电流试验

断路器分合闸线圈电流试验

试验目的 仅通过断路器低电压值来分析判断断路器的状态, 不能有效地反映断路器内部潜 在缺陷, 同时无法对故障进行定位, 分、 合闸线圈电流蕴含断路器操作回路的极大信 息, 典型的分、 合闸线圈动作电流暂态波形, 通常有两个波峰和一个波谷, 根据波峰、 波谷出现的时间位置, …
阅读更多...
关于外贸跟进客户过程中需要注意的地方

关于外贸跟进客户过程中需要注意的地方

如果你感觉业务进展困难&#xff0c;多去看一些书&#xff0c;多去链接一些人&#xff0c;特别是优秀的人&#xff0c;多交流会让你思维更加开阔&#xff0c;笔记做好实践起来&#xff0c;就会有收获&#xff01; 我记得汪老师说过&#xff1a;跟进客户&#xff0c;当你准备好…
阅读更多...
【Maven】依赖范围、依赖传递、依赖排除、依赖原则、依赖继承

【Maven】依赖范围、依赖传递、依赖排除、依赖原则、依赖继承

【Maven】依赖范围、依赖传递、依赖排除、依赖原则、依赖继承 依赖范围 依赖传递 依赖排除 依赖原则 依赖继承 依赖范围 在Maven中&#xff0c;依赖范围&#xff08;Dependency Scope&#xff09;用于控制依赖项在编译、测试和运行时的可见性和可用性。通过指定适当的依赖…
阅读更多...
AWK实战案例——筛选给定时间范围内的日志

AWK实战案例——筛选给定时间范围内的日志

时间戳与当地时间 概念&#xff1a; 1.时间戳&#xff1a; 时间戳是指格林威治时间自1970年1月1日&#xff08;00:00:00 GMT&#xff09;至当前时间的总秒数。它也被称为Unix时间戳&#xff08;Unix Timestamp&#xff09;。通俗的讲&#xff0c;时间戳是一份能够表示一份数据…
阅读更多...
关于Python 的 Web 自动化测试的实践

关于Python 的 Web 自动化测试的实践

Web 测试是软件测试中比较重要的一个分支&#xff0c;而要实现 Web 自动化测试则要求测试人员能熟练掌握自动化测试工具和编程语言。介绍免费开源的 Web 测试工具 Selenium&#xff0c;以及流行的编程语言 Python。根据自动化测试的原理&#xff0c;对网页元素的常用定位方式&a…
阅读更多...
教育行业的文件管理方法和实践

教育行业的文件管理方法和实践

信息化浪潮的冲击下&#xff0c;教育行业也正在向建设数据化平台发展。在文件管理方面&#xff0c;教育行业依旧存在文件交互与协作方式传统陈旧的问题。Zoho Workdrive为教育行业提供安全的文件集中存储管理空间&#xff0c;用户可以快速使用、共享文件&#xff0c;帮助教育行…
阅读更多...
内容动态展示抽屉组件

内容动态展示抽屉组件

知识点 mousemove与mouseenter的区别在于mousemove会触发事件冒泡&#xff0c;mouseenter不会&#xff0c;mouseleave同理。 mousemove会触发事件冒泡&#xff0c;因此鼠标在范围区域内移动时会一直触发。 mouseenter只触发一次&#xff0c;鼠标移入后触发&#xff0c;鼠标移…
阅读更多...
绘制曲线python

绘制曲线python

文章目录 import matplotlib.pyplot as plt# 提供的数据 x= [1,1.1,1.2,1.3,1.4,1.5,1.6,1.7,1.8,1.9,2,2.1,2.2,2.3,2.4,2.5,2.6,2.7,2.8,2.9,3,3.1,3.2,3.3,3.4,3.5,3.6,3.7,3.8,3.9,4,4.1,4.2,4.3,4.4,4.5,4.6,4.7,4.8,4.9,5,5.1,5.2,5.3,5.4,5.5,5.6,5.7,5.8,5.9,6,6.1,6.2…
阅读更多...
AI时代,这些绘画软件让你简单上手绘画

AI时代,这些绘画软件让你简单上手绘画

即时灵感 即时设计是一款基于云端的矢量编辑工具&#xff0c;可以帮助用户创建网页和移动应用程序原型、界面和可视化设计等。除此之外&#xff0c;即时设计还具备协同。实时预览、团队管理等多种功能&#xff0c;可以实现多个用户同时设计一个项目。 AI 绘画工具和即时设计虽…
阅读更多...
日撸java三百行day81-83

日撸java三百行day81-83

文章目录 说明CNN卷积神经网络1. 什么是CNN&#xff08;CNN基础知识&#xff09;1. 基本概念2.输入层3.卷积层3.1 图像3.2 卷积核3.3 偏置数3.4 滑动窗口步长3.5 特征图个数&#xff08;特征图通道数或深度&#xff09;3.6 边缘填充3.7 卷积过程例子 4. 激活函数5. 池化层6.全连…
阅读更多...
打破界限，图文档与物料清单完美互联

打破界限，图文档与物料清单完美互联

在现代企业的产品开发过程中&#xff0c;图文档和物料清单是不可或缺的重要信息。然而&#xff0c;由于数据来源多样、格式繁杂&#xff0c;图文档与物料清单之间的信息传递往往存在障碍。而PDM系统&#xff08;Product Data Management&#xff0c;产品数据管理&#xff09;的…
阅读更多...
MySQL插入数据的方法

MySQL插入数据的方法

插入数据方法&#xff1a; 1.insert into 表 values(value1, value2, value3....) 2.insert into 表 (字段1&#xff0c; 字段3&#xff0c; 字段5) values(value1, value2, value3) 3.insert into 表 [(字段1&#xff0c; 字段2&#xff0c; 字段3....)] values(value1, val…
阅读更多...
41.利用matlab 平衡方程用于图像（matlab程序）

41.利用matlab 平衡方程用于图像（matlab程序）

1.简述 白平衡 白平衡的英文为White Balance&#xff0c;其基本概念是“不管在任何光源下&#xff0c;都能将白色物体还原为白色”&#xff0c;对在特定光源下拍摄时出现的偏色现象&#xff0c;通过加强对应的补色来进行补偿。 所谓的白平衡是通过对白色被摄物的颜色还原&…
阅读更多...
C++经典排序算法详解

C++经典排序算法详解

目录 一、选择排序 二、冒泡排序 三、插入排序 一、选择排序 选择排序 选择排序&#xff08;Selection sort&#xff09;是一种简单直观的排序算法。它的工作原理是&#xff1a;第一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存…
阅读更多...
Linux命令200例：join将两个文件按照指定的键连接起来分析

Linux命令200例：join将两个文件按照指定的键连接起来分析

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌。CSDN专家博主&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023