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

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.mzph.cn/news/26967.shtml

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

相关文章

windows(iis)服务器部署安装wordpress(php)网站教程

windows(iis)服务器部署安装wordpress(php)网站教程

该教程包含iis安装，php安装，mysql安装，php网站部署上线，windows服务部署php网站，只需要这一篇文章就够了。 该教程为iis服务器部署安装wordpress(php)网站教程，同样适用wordpress网站迁移。 配置要求 1、windows服务器安装iis windows服务器安装iis管理器 打开控制面…
阅读更多...
项目中使用git vscode GitHubDesktopSetup-x64

项目中使用git vscode GitHubDesktopSetup-x64

一、使用git bash 1.使用git bash拉取gitee项目 1.在本地新建一个文件夹&#xff08;这个文件夹是用来存放从gitee上拉下来的项目的&#xff09; 2.在这个文件夹右键选择 git bash here 3.输入命令 git init (创建/初始化一个新的仓库) 4.输入命令 git remote add origin …
阅读更多...
医学影像PACS临床信息系统源码

医学影像PACS临床信息系统源码

医学影像临床信息系统&#xff08;Picture Archiving and Communication Systems&#xff09;PACS是指从医疗影像设备中获得数字影像&#xff0c;利用高速网络进行存储、管理、传输的医疗影像信息管理系统。通过该系统&#xff0c;能实现影像数字化、无胶片化管理。 登记系统 …
阅读更多...
配置Picgo图床之COS、OSS、Github图床

配置Picgo图床之COS、OSS、Github图床

简介 PicGo是一款开源的图片上传和管理工具&#xff0c;它提供了简单易用的界面和丰富的功能&#xff0c;方便用户上传、管理和分享图片。 以下是PicGo的一些主要特点和功能&#xff1a; 图片上传&#xff1a;PicGo支持将本地图片快速上传到云存储服务&#xff0c;如七牛云、…
阅读更多...
解决Vue+Element UI使用表单rules国际化时From表单验证信息不能实时更新

解决Vue+Element UI使用表单rules国际化时From表单验证信息不能实时更新

说明&#xff1a;该篇博客是博主一字一码编写的&#xff0c;实属不易&#xff0c;请尊重原创&#xff0c;谢谢大家&#xff01; 博主在工作之余开始进行自动化测试平台的开发&#xff0c;虽然已经996一个月了但是还是在使劲挤时间做这件事情&#xff0c;目前平台使用前端框架vu…
阅读更多...
LangChain手记 Overview

LangChain手记 Overview

整理并翻译自DeepLearning.AILangChain的官方课程&#xff1a;Overview 综述&#xff08;Overview&#xff09; LangChain是为大模型应用开发设计的开源框架 LangChain目前提供Python和JavaScript&#xff08;TypeScript&#xff09;两种语言的包 LangChain的主攻方向是聚合和…
阅读更多...
扩散模型实战（三）：扩散模型的应用

扩散模型实战（三）：扩散模型的应用

推荐阅读列表&#xff1a; 扩散模型实战&#xff08;一&#xff09;&#xff1a;基本原理介绍 扩散模型实战&#xff08;二&#xff09;&#xff1a;扩散模型的发展 扩散只是一种思想&#xff0c;扩散模型也并非固定的深度网络结构。除此之外&#xff0c;如果将扩散的思想融入…
阅读更多...
docker solr-8.11.2安装部署

docker solr-8.11.2安装部署

历史背景 现在solr官网仅能够下载到最新版本的安装包。并且支持docker。现在就用docker来部署一下 1、准备工作 docker环境部署&#xff08;这个自己百度一下哈&#xff0c;很简单两个命令就能解决&#xff09; yum -y install yum-utils yum -y install docker-ce 安装命令…
阅读更多...
第7集丨Vue 江湖 —— 条件渲染

第7集丨Vue 江湖 —— 条件渲染

目录 一、v-show二、v-if2.1 基本使用2.2 条件渲染分组2.3 与 v-else-if、v-else 结合使用 三、v-if vs v-show四、测试案例 本节条件渲染所涉及到的指令有&#xff1a; v-showv-ifv-else-ifv-else 一、v-show 1. 用法&#xff1a; 语法: v-show" 表达式"&#xff…
阅读更多...
FFmpeg 使用总结

FFmpeg 使用总结

FFmpeg 简介 FFmpeg的名称来自MPEG视频编码标准&#xff0c;前面的“FF”代表“Fast Forward”&#xff0c;FFmpeg是一套可以用来记录、转换数字音频、视频&#xff0c;并能将其转化为流的开源计算机程序。可以轻易地实现多种视频格式之间的相互转换。包括如下几个部分&#xf…
阅读更多...
webpack基础知识九：如何提高webpack的构建速度？

webpack基础知识九：如何提高webpack的构建速度？

一、背景 随着我们的项目涉及到页面越来越多&#xff0c;功能和业务代码也会随着越多&#xff0c;相应的 webpack 的构建时间也会越来越久 构建时间与我们日常开发效率密切相关&#xff0c;当我们本地开发启动 devServer 或者 build 的时候&#xff0c;如果时间过长&#xff…
阅读更多...
电源控制--品质因素Q值全解

电源控制--品质因素Q值全解

什么是品质因素Q值&#xff1f; 在电源控制中&#xff0c;品质因素 Q 值通常用于描述电源滤波器的性能。电源滤波器用于减小电源中的噪声和干扰&#xff0c;以提供干净稳定的电源供应给电子设备。 品质因素 Q 值在电源滤波器中表示滤波器的带宽和中心频率之比&#xff0c;用于…
阅读更多...
IP提取器对比器

IP提取器对比器

需求&#xff1a; 一个html 页面 &#xff0c;有两个输入框 第一个输入框输入文本中包含多个ip&#xff0c;输入的ip是不规则的&#xff0c;需要使用正则表达式提取出 输入文本的ip地址 &#xff0c; 然后在第二个输入框中输入内容&#xff0c;并提取出内容的ip &#xff0c;如…
阅读更多...
什么是OCR？OCR技术详解

什么是OCR？OCR技术详解

光学字符识别(Optical Character Recognition)简称为“OCR”。ORC是指对包含文本资料的图像文件进行分析识别处理&#xff0c;获取文字及版面信息的技术。 一般包括以下几个过程&#xff1a; 1.图像输入 针对不同格式的图像&#xff0c;有着不同的存储格式和压缩方式。目前&…
阅读更多...
Elastic：linux设置elasticsearch、kibana开机自启

Elastic：linux设置elasticsearch、kibana开机自启

0. 引言 每次启动服务器都要手动启动es服务&#xff0c;相当之不方便&#xff0c;为此&#xff0c;书写一个脚本&#xff0c;实现es、kibana的开机自启 1. 原理 首先任何服务要实现开机自启&#xff0c;都可分为如下三步&#xff1a; 1、在/etc/init.d目录下创建启动、关闭服…
阅读更多...
海康威视摄像头配置RTSP协议访问、onvif协议接入、二次开发SDK接入

海康威视摄像头配置RTSP协议访问、onvif协议接入、二次开发SDK接入

一、准备工作 （1）拿到摄像头之后，将摄像头电源线插好，再将网线插入到路由器上。 （2）将自己的笔记本电脑也连接到路由器网络，与摄像头出在同一个局域网。 二、配置摄像头 2.1 激活方式选择 第一次使用设备需要激活，在进行配置。 最简单，最方便的方式是选择浏览器激…
阅读更多...
uniapp创建项目入门【详细】

uniapp创建项目入门【详细】

大家在学习vue和微信小程序之后&#xff0c;就可以开始来学习uniapp了&#xff0c;在uniapp中&#xff0c;一套代码可以跨越所有的平台&#xff0c;可以很方便的维护。接下来我们先来学习如何创建uinapp的项目 一、uniapp的创建需求 大家只要会vue和微信小程序的基础来学习unia…
阅读更多...
浅析 String

浅析 String

浅析String 一、创建字符串二、字符串与常量池三、字符串的不可变性四、字符串的拼接五、StringBuilder和StringBuffer 一、创建字符串 //三种常用的构造字符串的方式public static void main(String[] args) {String str1 "hello";String str2 new String("w…
阅读更多...
Python导出SqlServerl数据字典为excel

Python导出SqlServerl数据字典为excel

sql代码 SELECTtableName D.name ,tableIntroduce isnull(F.value, ),sort A.colorder,fieldName A.name,catogary B.name,bytes A.Length,lengths COLUMNPROPERTY(A.id, A.name, PRECISION),scales isnull(COLUMNPROPERTY(A.id, A.name, Scale), 0),isOrNotNull Cas…
阅读更多...
springboot 对接 minio 分布式文件系统

springboot 对接 minio 分布式文件系统

1. minio介绍 Minio 是一个基于Go语言的对象存储服务。它实现了大部分亚马逊S3云存储服务接口&#xff0c;可以看做是是S3的开源版本&#xff0c;非常适合于存储大容量非结构化的数据&#xff0c;例如图片、视频、日志文件、备份数据和容器/虚拟机镜像等&#xff0c;而一个对象…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023