element ui的table多选

devtools/2024/9/23 0:24:09/

使用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.ppmy.cn/devtools/39151.html

相关文章

Mybatis-Plus常用的增删改查坑

添加依赖 <!--实体类上加上Data注解就不用写get&#xff0c;set&#xff0c;toString&#xff0c;equals等方法了--><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional…

Linux内核--设备驱动(六)媒体驱动框架整理(2)--视频

目录 一、引言 二、V4L2 ------>2.1、主要结构体 ------------>2.2.1、video_device ------------>2.2.2、v4l2_device ------------>2.2.3、v4l2_subdev ------>2.2、流程 ------>2.3、驱动实例 ------>2.4、V4L2的ioctl类型 ------------>…

Linux——进程的优先级、ACL

一、系统性能调优 Redhat7和centos7默认安装并启动了tuned服务 实验 [rootuser ~]# tuned-adm list //查看所有的调优方案 [rootuser ~]# tuned-adm recommend // 查看推荐的调优方案 virtual-guest 适用于作为虚拟机客户机运行的设备&#xff0…

Occlum原理解析及使用说明

目录 一、设计初衷 二、背景知识 1.什么是可信计算 2.什么是TEE 3.传统SGX SDK的问题 三、Occlum 1.如何使用 2.特点 3.如何使用 1.Docker部署 1 硬件支持 2 环境 3 拉取镜像创建虚机 4 简单验证 4.Occlum中gcc编译 1 交叉编译 2 初始化Occlum实例 3 Occlum构…

高效视频剪辑:批量剪辑添加srt字幕,快速制作专业视频

在视频制作过程中&#xff0c;字幕扮演着至关重要的角色&#xff0c;它们不仅能增强观众对视频内容的理解&#xff0c;还能提高视频的观感体验。然而&#xff0c;手动为每一个视频添加字幕是一项既耗时又繁琐的任务。现在有了云炫AI智剪和技巧&#xff0c;我们可以轻松地实现批…

解决git合并冲突

解决Git请求合并冲突通常涉及以下步骤&#xff1a; 了解冲突&#xff1a; 当Git在合并过程中无法自动解决文件差异时&#xff0c;它会产生冲突。 你可以通过查看Git的输出或检查冲突文件的特殊标记来识别冲突。 查看冲突文件&#xff1a; 打开Git告诉你存在冲突的文件。 你…

设计模式-07 设计模式-观察者模式(Observer Pattern)

设计模式-07 设计模式-观察者模式&#xff08;Observer Pattern&#xff09; 1.定义 观察者模式是一种软件设计模式&#xff0c;它定义了一种一对多的依赖关系&#xff0c;其中一个对象&#xff08;称为“主题”&#xff09;维护了一个依赖对象的列表&#xff08;称为“观察者”…

P1434 滑雪(java)

题目描述: Michael 喜欢滑雪。这并不奇怪&#xff0c;因为滑雪的确很刺激。可是为了获得速度&#xff0c;滑的区域必须向下倾斜&#xff0c;而且当你滑到坡底&#xff0c;你不得不再次走上坡或者等待升降机来载你。Michael 想知道在一个区域中最长的滑坡。区域由一个二维数组给…