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.mzph.cn/diannao/9859.shtml

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

相关文章

【文化课学习笔记】【物理】功与能

【物理】功与能 功 基础概念 定义 一个物体在力的作用下&#xff0c;沿力的方向&#xff0c;通过一段距离(位移)&#xff0c;则称这个力做了功。 公式 功的定义式&#xff1a; \[W Fx \] 这里的 \(x\) 指的是物体沿力的方向上发生的位移。由于力 \(F\) 和位移 \(x\) 都是矢量&…

[笔试训练](十八)

目录 052:字符串压缩 053:chika和蜜柑 054:01背包 052:字符串压缩 压缩字符串(一)_牛客题霸_牛客网 (nowcoder.com) 题目&#xff1a; 题解&#xff1a; 双指针模拟 class Solution { public:string compressString(string param) {int nparam.size();string ret;int num…

Linux-基础命令第三天

1、命令&#xff1a;wc 作用&#xff1a;统计行数、单词数、字符数 格式&#xff1a;wc 选项 文件名 例&#xff1a; 统计文件中的行数、单词数、字符数 说明&#xff1a;59代表行数&#xff0c;111代表单词数&#xff0c;2713代表字符数&#xff0c;a.txt代表文件名 选项…

nginx中try_files $uri $uri/ /index.html的作用 和 $uri的含义

try_files $uri $uri/ /index.html; 这句话是Nginx服务器配置中的一条指令&#xff0c;用于设置处理请求的策略。 $uri&#xff1a;这是Nginx内置的一个变量&#xff0c;代表当前请求的URI&#xff0c;不包括参数部分。例如&#xff0c;如果请求的URL是http://example.com/user…

【Java代码审计】代码审计的方法及常用工具

【Java代码审计】代码审计的方法及常用工具 代码审计的常用思路代码审计辅助工具代码编辑器测试工具反编译工具Java 代码静态扫描工具 代码审计的常用思路 1、接口排查&#xff08;“正向追踪”&#xff09;&#xff1a;先找出从外部接口接收的参数&#xff0c;并跟踪其传递过…

【MySQL基本查询(下)】

文章目录 一、update案例 二、Delete案例注意&#xff1a;delete 全表数据的行为慎用&#xff01;truncate 三、插入查询结果案例 四、了解一些函数1.count函数2.sum函数3. avg函数4.max函数5. min函数 五、group by子句的使用案例having和where 一、update 该关键字的功能就是…

蓝桥杯备战5.图书管理员

[NOIP2017]图书管理员 (nowcoder.com) #include<bits/stdc.h> #define endl \n #define int long long using namespace std; const int N 2e510,M1e310; int a[N]; int n,q; int check(int l,int x) {int tmppow(10,l);for(int i1;i<n;i){if(a[i]%tmpx){cout<&…

如何在40分钟之内,又快又准完成四六级阅读柯桥考级英语培训

答题步骤和技巧 1 选词填空 选词填空部分字数在200~300之间&#xff0c;设有10个空&#xff0c;提供15个备选项&#xff0c;从中选出最合适答案。选词填空题相对于普通的完型题简单&#xff0c;但是考察内容基本一致。集中考察的点有语法现象&#xff0c;逻辑衔接和搭配。每空…

纯血鸿蒙APP实战开发——数字滚动动效实现

介绍 本示例主要介绍了数字滚动动效的实现方案。 该方案多用于数字刷新&#xff0c;例如页面刷新抢票数量等场景。 效果图预览 使用说明&#xff1a; 下拉页面刷新&#xff0c;数字进行刷新。 实现思路 通过双重ForEach循环分别横向、纵向渲染数字。 Row() {ForEach(this…

MySQL数据库——23.元数据

MySQL 元数据 是关于数据库和表结构的数据&#xff0c;它包含了数据库中的各种信息&#xff0c;例如表的结构、索引、触发器、存储过程等。元数据存储在系统数据库中&#xff0c;主要包括以下几个系统表&#xff1a; information_schema: 这个数据库包含了 MySQL 数据库服务器…

Rancher简介

Rancher是一个容器管理平台&#xff0c;它提供了一套工具和功能来帮助用户轻松部署和管理容器化应用。 以下是Rancher的主要特点和功能&#xff1a; 多集群管理&#xff1a;Rancher能够集中管理多个Kubernetes集群&#xff0c;无论这些集群位于云上还是本地数据中心。认证与权…

Day 29 MySQL的主从复制集群

一&#xff1a;主从复制 1.主从复制概念 什么是主从复制&#xff1a; ​ 主从复制&#xff0c;是用来建立一个和主数据库完全一样的数据库环境&#xff0c;称为从数据库&#xff1b;主数据库一般是准实时的业务数据库 主从复制的作用&#xff1a; ​ 做数据的热备&#xf…

GPU云渲染平台选择应该看什么?瑞云渲染带你了解

在选择GPU云渲染平台时&#xff0c;关键的考量因素包括渲染速度、支持的软件兼容性、价格性价比以及用户服务质量。了解这些指标将帮助用户在众多选项中做出明智的选择&#xff0c;以优化渲染效率和成本效益。 一、GPU与渲染有什么关系 GPU与渲染有着密切的关系&#xff0c;在…

springboot增删改查

我的记录 RestController RequestMapping("/user") public class UserController {Autowiredprivate UserService userService;GetMapping("/list")public List<User> list(){return userService.list();}//新增PostMapping("/save")publi…

AS-VJ900实时视频拼接系统产品介绍:两画面视频拼接方法和操作

目录 一、实时视频拼接系统介绍 &#xff08;一&#xff09;实时视频拼接的定义 &#xff08;二&#xff09;无缝拼接 &#xff08;三&#xff09;AS-VJ900功能介绍 1、功能 2、拼接界面介绍 二、拼接前的准备 &#xff08;一&#xff09;摄像机选择 &#xff08;二&a…

Linux脚本 -- 监控用户态程序的内存分布

程序内存监控脚本使用说明 本文档旨在详细介绍如何使用特定的Shell脚本来监控Linux环境下一个应用程序的内存使用情况&#xff0c;并记录其变化。 脚本概述 脚本通过不断检测特定应用程序的内存映射&#xff0c;并对比连续两次的结果&#xff0c;如果发现有变化&#xff0c;…

高精度数据采集模块8路16位模拟量输入

M160E以太网远程I/O无线数据采集模块是一款工业级、隔离设计、高可靠性、高稳定性和高精度数据采集模块&#xff0c;嵌入式32位高性能微处理器MCU&#xff0c;集成2路工业10/100M自适应以太网模块里面。提供多种I/O&#xff0c;支持标准Modbus TCP&#xff0c;可集成到SCADA、O…

学习的体会,献给刚刚接触编程的你(7)

距离我上次更新博客时间有一年多了&#xff0c;中间我总是挣扎与颓废&#xff0c;博客一直没有更新。每天的工作占据了自己大量的时间&#xff0c;感觉自己没有生活感&#xff0c;自己就如同一个不能停止的机器一样,内耗严重&#xff0c;同时也没有获得任何成就感。 也许你现在…

基于FPGA实现的HDMI TO MIPI扩展显示器方案

FPGA方案&#xff0c;HDMI IN接收原始HDMI 信号&#xff0c;输出显示到LCD 屏上 客户应用&#xff1a;扩展显示器 主要特性&#xff1a; 1.支持2K以下任意分辨率显示 2.支持OSD 叠加多个图层 3.支持MIPI/EDP/LVDS/RGB屏 4.支持放大缩小匹配屏分辨率 5.零延时&#xff0c;输…

[力扣题解]77. 组合问题

题目&#xff1a;77. 组合 思路 回溯法 调试用代码 // 调试用 // 理解不了减枝那个值怎么设置的 class Solution { private:int order 0;vector<vector<int>> result; // 存放符合条件结果的集合vector<int> path; // 用来存放符合条件结果void backtra…