element ui的table多选

使用el-table的selection-change事件来获取选中的值;

例:

html代码:

<el-button type="primary" @click="openTableSet">列表设置</el-button><!-- 列表设置弹框 -->
<el-dialog :close-on-click-modal="false" title="列表设置" :visible.sync="tableSetShow" append-to-body><el-table ref="tableSet" :data="tableSetData" border style="width: 100%" :cell-style="{ textAlign: 'center' }" header-cell-class-name="table-th" @selection-change="tableSetMultipleChange" v-if="tableSetShow"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="title" label="标题名称" /></el-table><div slot="footer" class="dialog-footer"><el-button @click="tableSetShow = false">取 消</el-button><el-button type="primary" @click="editTableSetMultiple">确定</el-button></div>
</el-dialog>

js变量代码:

// 列表设置显示隐藏
tableSetShow: false,
// 列表设置数据
tableSetData: [{ key: "avatar", title: "头像"},{ key: "nickname", title: "昵称"},{ key: "name", title: "姓名"},{ key: "mobile", title: "手机号"},{ key: "company", title: "公司"},{ key: "position", title: "职位"},{ key: "email", title: "邮箱"},{ key: "subscribe", title: "粉丝状态"},{ key: "authorized", title: "认证状态"},{ key: "type", title: "用户分类"},{ key: "app", title: "应用"},{ key: "identity", title: "用户身份"},{ key: "created_at", title: "创建时间"}
],
// 列表设置多选数据
tableSetMultiple: [],
// 列表绑定多选值判断显示隐藏
tableSetMultipleBinding: []

js方法代码:

/*** 打开列表设置*/
openTableSet() {this.tableSetShow = true;this.getTableSetMultiple();
},
/*** 列表设置列表多选改变*/
tableSetMultipleChange(val) {this.tableSetMultiple = [];val.forEach(item => {this.tableSetMultiple.push(item.key);});
},
/*** 列表设置获取数据*/
async getTableSetMultiple() {let params = {list_name: "user"};let res = await getTableColumnData(params);if (res.code == 200) {let data = res.data.json_data;if (data.length == 0) data = ["avatar", "nickname", "name", "mobile", "company", "position", "email","subscribe", "authorized", "type", "app", "identity", "created_at"];this.tableSetMultiple = [];this.tableSetMultipleBinding = [];this.$nextTick(() => {this.tableSetData.forEach(item => {data.forEach(item2 => {if (item.key == item2) {this.tableSetMultiple.push(item.key);this.tableSetMultipleBinding.push(item.key);this.$refs.tableSet ? this.$refs.tableSet.toggleRowSelection(item) : "";};});});});};
},
/*** 列表设置保存数据*/async editTableSetMultiple() {if (this.tableSetMultiple.length == 0) {this.$message.warning("请最少选择一项展示");return false;};let params = {list_name: "user",json_data: this.tableSetMultiple};let res = await updateTableColumnData(params);if (res.code == 200) {this.getTableSetMultiple();this.tableSetShow = false;this.$message.success("保存成功");} else {this.$message.error("保存失败");}
}

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

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

相关文章

在uniapp里面使用 mp-html 并且开启 latex 功能

在uniapp里面使用 mp-html 并且开启 latex 功能 默认情况下 mp-html 是不会开启 latex 功能的, 如果需要开启 latex 功能是需要到代码操作拉取代码自行打包的。 这里说一下 mp-html 里面的 latex 功能是由 https://github.com/rojer95/katex-mini 提供的技术实现&#xff0c;…

五一反向旅游,景区“AI+视频监控”将持续助力旅游业发展

一、建设背景 每年五一劳动节出去旅游都是人挤人状态&#xff0c;这导致景区的体验感极差。今年“五一反向旅游”的话题冲上了热搜&#xff0c;好多人选择了五一之后再出去旅游&#xff0c;避开拥挤的人群&#xff0c;这个时候景区的监管力度和感知能力就更要跟上去&#xff0…

Cargo - 构建 rust项目、管理依赖包

文章目录 关于 Cargo构建项目创建工程编译运行buildclean 管理依赖添加依赖updatecheck计时 manual rust 安装可参考&#xff1a;https://blog.csdn.net/lovechris00/article/details/124808034 关于 Cargo Cargo 官方文档 &#xff1a; https://doc.rust-lang.org/cargo/crat…

Web前端开发 小实训(三) 商品秒杀小练习

学生能够在本次实训中完成商品秒杀页面的基本逻辑 任务要求 能够实现某一个商品的秒杀&#xff0c;在倒计时结束后不再进行秒杀。 操作步骤 1、打开预设好的页面 <html><head><meta charset"utf-8"><title>秒杀</title><link …

2024.5.10

TCP服务器端 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//设置窗口大小和窗口大小固定this->resize(727,879);this->setFixedSize(727,879);//创建…

MySQL——变量的浮点数问题处理

新建链接&#xff0c;自带world数据库&#xff0c;里面自带city表格。 DQL #MySQL变量的浮点数问题处理 set dx3.14,dy3.25; select dxdy;#计算显示异常&#xff0c;会有很多00000的提示set resultdxdy; select result; 查询结果

Kafka分级存储概念(一)

Kafka分级存储及实现原理 概述 Kafka社区在3.6版本引入了一个十分重要的特性: 分级存储,本系列文章主要旨在介绍Kafka分级存储的设计理念、设计细节以及具体的代码实现 背景:为什么要有分级存储? 场景 作为一款具有高吞吐及高性能的消息中间件,Kafka被广泛应用在大数据、…

如何使用jmeter进行接口测试?jmeter接口测试流程是怎样的

前言 我们学习自动化测试都会用到不同的工具&#xff0c;那么今天笔者呢&#xff0c;想给大家聊聊Jmeter接口测试流程详解&#xff0c;废话不多说直接进入正题。 一、jmeter简介 Jmeter是由Apache公司开发的java开源项目&#xff0c;所以想要使用它必须基于java环境才可以&am…

让GPT们成为我们的小助手:使用ChatGPT来生成测试用数据

让GPT们成为我们的小助手 任务&#xff1a;帮忙生成测试数据 今天本来想做一个测试&#xff0c;所以需要一些测试数据。为了让测试显得更真实&#xff0c;所以希望测试数据看上去就是一份真实的数据&#xff0c;所以我就希望ChatGPT&#xff08;这里是代指&#xff0c;我有使…

太阳能无人机的多元化应用

随着新能源技术的不断发展和成熟&#xff0c;太阳能在无人机的应用技术已经成熟。太阳能无人机得到了量产和广泛的应用。传统无人机相比&#xff0c;太阳能无人机无需燃油&#xff0c;运行费用低廉&#xff0c;搭载多种高科技设备&#xff0c;能够高效、多元化地采集和分析各类…

UG NX二次开发(C#)-获取Part中对象创建时的序号(*)

文章目录 1、前言2、UG NX的对象序号讲解3、采用UG NX二次开发或者建模序号4、注意事项1、前言 在UG NX中,我们创建任意一个对象,都会在模型历史中添加一个创建对象的编号,即是对象序号,这个是递增的,当删除中间产生的对象时,其序号会重新按照建模顺序重新排布。今天一个…

宝塔面板如何删除一个站点

我们一般的网站都是PHPMySQL开发的&#xff0c;所以删除站点&#xff0c;就要先删数据库&#xff0c;再删网站目录 注意&#xff1a;一点要确保无用的再删 删除站点目录

布局全球内容生态,酷开科技Coolita AIOS以硬核品质亮相

当前&#xff0c;全球产业链供应链格局持续重构&#xff0c;成为影响中国对外经济发展的重要因素。2024年4月15至5月5日&#xff0c;历史久、规模大、层次高&#xff0c;作为中国外贸风向标的第135届中国进出口商品交易会&#xff08;即广交会&#xff09;在美丽的广州隆重举行…

CTFHUB-技能树-Web题-RCE(远程代码执行)-文件包含

CTFHUB-技能树-Web题-RCE&#xff08;远程代码执行&#xff09; 文件包含 文章目录 CTFHUB-技能树-Web题-RCE&#xff08;远程代码执行&#xff09;文件包含解题方法1:![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/71f7355b3c124dfe8cdf1c95e6991553.png#pic_ce…

Linux 麒麟系统安装

国产麒麟系统官网地址&#xff1a; https://www.openkylin.top/downloads/ 下载该镜像后&#xff0c;使用VMware部署一个虚拟机&#xff1a; 完成虚拟机创建。点击&#xff1a;“开启此虚拟机” 选择“试用试用开放麒麟而不安装&#xff08;T&#xff09;”&#xff0c;进入op…

uniapp生成二维码(uQRCode)与自定义绘制样式与内容

二维码生成使用了一款基于Javascript环境开发的插件 uQRCode &#xff0c;它不仅适用于uniapp&#xff0c;也适用于所有Javascript运行环境的前端应用和Node.js。 uQRCode 插件地址&#xff1a;https://ext.dcloud.net.cn/plugin?id1287 目录 1、npm安装 2、通过import引…

从零开始的软件测试学习之旅(六)测试网络基础知识

测试网络基础知识 HTTP和HTMLURLDNS客户端和服务器请求方法和状态码面试高频Fiddler抓包工具教学弱网 HTTP和HTML 概念 html: HyperText Markup Language 超文本标记语言 http: HyperText Transfer Protocol 超文本传输协议 超文本: 图片, 音频, 视频 关系:http 可以对 html 的…

C++对象的拷贝构造函数

如果一个构造函数的第一个参数是类本身的引用,且没有其它参数(或者其它的参数都有默认值),则该构造函数为拷贝构造函数。 拷贝(复制)构造函数:利用同类对象构造一个新的对象 ●1.函数名和类同名 (构造函数) ●2.没有返回值 (构造函数) ●3.第一个参数必…

Linux基础之git与调试工具gdb

目录 一、git的简单介绍和使用方法 1.1 git的介绍 1.2 git的使用方法 1.2.1 三板斧之git add 1.2.2 三板斧之git commit 1.2.3 三板斧之git push 二、gdb的介绍和一些基本使用方法 2.1 背景介绍 2.2 基本的使用方法 一、git的简单介绍和使用方法 1.1 git的介绍 Git是一…

Kubernetes——基础认识

一、简介 1.Kubernetes是什么 Kubernetes 是一个全新的基于容器技术的分布式架构解决方案&#xff0c;是 Google 开源的一个容器集群管理系统&#xff0c;Kubernetes 简称 K8S。 Kubernetes 是一个一站式的完备的分布式系统开发和支撑平台&#xff0c;更是一个开放平台&#x…