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.mfbz.cn/a/610282.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

替代UCC21550隔离式双通道栅极驱动器

描述 PC86320是一个隔离的双通道栅极驱动器具有可编程死区时间和宽温度范围。它设计有5A峰值源和6A峰值吸收电流来驱动电源高达2MHz的MOSFET、SiC、GaN和IGBT晶体管开关频率。PC86320可以配置为两个低端驱动器&#xff0c;两个高边驱动器&#xff0c;或具有可编程功能的半桥驱…

二叉树的广度优先遍历 - 华为OD统一考试(D卷)

OD统一考试(D卷) 分值: 200分 题解: Java / Python / C++ 题目描述 有一棵二叉树,每个节点由一个大写字母标识(最多26个节点)。 现有两组字母,分别表示后序遍历(左孩子->右孩子->父节点)和中序遍历(左孩子->父节点->右孩子)的结果,请输出层次遍历的结…

世界上知名度最高的人物颜廷利:精神与物质的对岸有五种类型的人

世界上知名度最高的人物颜廷利&#xff1a;精神与物质的对岸有五种类型的人 面对现实生活中的物质生活和精神生活而言&#xff0c;确切的说&#xff0c;实际上总共可以划分为五种类型的人&#xff1a; 第一种&#xff0c;隔河观望的人&#xff0c;他们总是以‘物质’&#xff0…

英语学习笔记8——What‘s your job?

What’s your job? 你是做什么工作的&#xff1f; 词汇 Vocabulary policeman 男警察 policewoman 女警察 police n. 警力 集合名词&#xff0c;永表复数 西方国家警察管的事很多。交警&#xff0c;刑警&#xff0c;武警一般不分开。 taxi driver 出租车司机 taxi / cab n.…

QA测试开发工程师面试题满分问答22: (干货)为什么要加锁Lock,举个例子说说

加锁原因 下面代码会有什么问题&#xff1f; import threading import requests from queue import Queuedef make_request(url, params, results_queue):response requests.get(url, paramsparams)result {url: url,params: params,response: response.text}results_queue…

新型AI Stable Artisan横空出世?

StabilityAI宣布推出Stable Artisan 前言 就在今天&#xff0c;Stability AI宣布推出 Stable Artisan&#xff0c;让更广泛的受众能够使用 Stability AI 的 Developer Platform API 功能。Stable Artisan 具有他们的高级型号&#xff0c;例如 Stable Diffusion 3、Stable Video…

宇宙数字扩展全球业务,设立欧洲和亚洲分支机构

2024年4月18日 宇宙数字蚂蚁矿机今日宣布在欧洲和亚洲设立新的分支机构,这一举措旨在进一步强化公司的全球服务网络,提供更地道的客户支持和更快的物流服务,以提升用户满意度。 新的分支机构将位于欧洲和亚洲的战略性城市,为当地客户提供更快速和更便捷的服务。通过本地化的客…

记一次springboot jpa更新复杂几何类型报错Only simple geometries should be used

问题&#xff1a; 更新数据时&#xff0c; 几何字段MultiPolygon类型时报错&#xff1b; java.lang.IllegalStateException: Only simple geometries should be used 几何字段Point类型时不报错&#xff1b; 新增时字段存在MultiPolygon不报错。 查看日志可知&#xff0c;…

重磅!一款实景三维建模软件官宣免费开放

近日&#xff0c;RealityCapture推出了1.4版本。新版本除了常规功能的新增和修复外&#xff0c;更为重磅的是推出了新的定价模式&#xff01;RealityCapture1.4版本官宣。将对学生、教育工作者、业余爱好者和年收入低于100万美元的公司免费提供&#xff0c;而且还是所有功能&am…

Java Swing游戏开发学习27

内容来自RyiSnow视频讲解 这一节讲的是Equip & Use Items装备与使用物品。 前言 实现捡起物品、切换武器装备、使用物品。 修复问题 当光标在物品栏&#xff08;背包&#xff09;中移动到没有物品的格子中的时候&#xff0c;使装备介绍子窗口不可见&#xff0c;反之可见…

CSS-浮动

float (浮动) 作用&#xff1a;盒子的顶点是一样的&#xff0c;具备行内块的特征&#xff0c;能设置宽高 属性&#xff1a;float 属性值&#xff1a;left 浮动在网页左边 right 浮动在网页右边 .a{width: 100px;height: 100px;float:left;background-color: red;}.b…

云手机:海外舆情监控的新工具

在数字化时代&#xff0c;海外舆情监控对于企业、品牌和政府机构来说&#xff0c;已经变得至关重要。传统的舆情监控方法往往受限于地域、设备和技术&#xff0c;而云手机的出现&#xff0c;为海外舆情监控带来了全新的解决方案。 一、云手机与海外舆情监控的完美结合 云手机作…

一个开源即时通讯源码

一个开源即时通讯源码 目前已经含服务端、PC、移动端即时通讯解决方案&#xff0c;主要包含以下内容。 服务端简介 不要被客户端迷惑了&#xff0c;真正值钱的是服务端&#xff0c; 服务是采用Java语言开发&#xff0c;基于spring cloud微服务体系开发的一套即时通讯服务端。…

华为eNSP学习—IP编址

IP编址 IP编址子网划分例题展示第一步:机房1的子网划分第二步:机房2的子网划分第三步:机房3的子网划分IP编址 明确:IPv4地址长度32bit,点分十进制的形式 ip地址构成=网络位+主机位 子网掩码区分网络位和主机位 学此篇基础: ①学会十进制与二进制转换 ②学会区分网络位和…

Python批量备份华为设备配置到FTP服务器

Excel表格存放交换机信息&#xff1a; 备份文件夹效果图&#xff1a; Windows系统配置计划任务定时执行python脚本&#xff1a; Program/script&#xff1a;C:\Python\python.exe Add arguments (optional)&#xff1a; D:\Python_PycharmProjects\JunLan_pythonProje…

能源系统升级BACnet IP分布式I/O边缘模块深度整合

能源管理系统(EMS)的高效运行成为了实现绿色建筑、节能减排的关键。而BACnet IP分布式远程I/O模块作为这一系统中的重要组件&#xff0c;正发挥着不可小觑的作用。本文将以某大型商业综合体为例&#xff0c;探讨BACnet IP I/O模块如何在能源管理中大显身手。 商业综合体涵盖办公…

揭秘APP广告变现:轻松赚取额外收入!

在移动应用&#xff08;APP&#xff09;的世界中&#xff0c;变现能力是衡量一个应用成功与否的关键指标之一。无论是个人开发者还是企业团队&#xff0c;如何通过应用创造收入&#xff0c;始终是一个备受关注的话题。今天&#xff0c;我们将深入探讨APP广告变现的路径&#xf…

【ElementUI -- 优化小技巧系列】 -- el-tree 节点内容过长优化 以及选中默认节点

在使用elementui过程中经常碰到关于样式的问题&#xff0c;我曾经很喜欢通过类名修改css样式来做&#xff0c;其实原生封装的elementui库的样式对于普通开发来说已经足够了&#xff0c;通过类名修改css只会让组件臃肿难以维护&#xff0c;现在真的越来越怕写css&#xff0c;经常…

镜舟科技亮相2024中国移动算力网络大会、Qcon、DTC等多项活动

在刚刚过去的 4 月份&#xff0c;镜舟科技受邀参与一系列技术交流活动&#xff0c;与移动云、金科创新社、infoQ、墨天轮、开科唯识等媒体及合作伙伴展开积极交流&#xff0c;并分享其在数据技术、金融等垂直行业领域的创新实践&#xff0c;从产业侧、业务侧、技术侧洞察需求、…

基于springboot+mybatis+vue的项目实战之页面参数传递

如图所示&#xff0c;删除操作可以用按钮实现&#xff0c;也可以用超链接来实现。 1、第一种情况&#xff0c;用按钮实现。 html页面相关&#xff1a; <button type"button" click"deleteId(peot.id)">删除</button> <script>new Vue(…
最新文章