el-table多选表格 实现默认选中 删除选中列表取消勾选等联动效果

news2024/9/20 7:53:22

实现效果如下:
在这里插入图片描述
代码如下:

<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="日期" width="120">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <div>
      <p v-for="(item, index) of multipleSelection" :key="index">
        {{ item.name }}
        <span @click="delect(item, index)">删除</span>
      </p>
    </div>
  </div>
</template>
<script>
export default {
  name: "HomeIndex",
  components: {},
  data() {
    return {
      tableData: [],
      multipleSelection: [],
    };
  },
  created() {
    this.allCheck();
  },
  mounted() {},
  methods: {
    allCheck() {
      this.tableData = [
        {
          id: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ];
      this.multipleTable = [
        {
          id: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ];
      let checkedId = [];
      for (let item of this.multipleTable) {
        checkedId.push(item.id);
      }
      this.$nextTick(() => {
        for (let key in this.tableData) {
          if (checkedId.indexOf(this.tableData[key]["id"]) !== -1) {
            this.$refs.multipleTable.toggleRowSelection(
              this.tableData[key],
              true
            );
          }
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delect(item, index) {
      this.$refs.multipleTable.toggleRowSelection(
        this.tableData.find((ite) => ite.id == item.id),
        false
      );
    },
  },
};
</script>
<style   scoped>
</style>


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

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

相关文章

HarmonyOS 快速入门TypeScript

1.什么是TypeScript&#xff0c;它和JavaScript&#xff0c;ArkTs有什么区别 ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript&#xff08;简称TS&#xff09;的基础上&#xff0c;匹配ArkUI框架&#xff0c;扩展了声明式UI、状态管理等相应的能力&#xff0c;让开发…

CSS隐藏元素的N种方法,你知道哪一种最适合你?

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 ⭐ 专栏简介 &#x1f4d8; 文章引言 一、前…

(免费领源码)java#Springboot#mysql装修选购网站99192-计算机毕业设计项目选题推荐

摘 要 随着科学技术&#xff0c;计算机迅速的发展。在如今的社会中&#xff0c;市场上涌现出越来越多的新型的产品&#xff0c;人们有了不同种类的选择拥有产品的方式&#xff0c;而电子商务就是随着人们的需求和网络的发展涌动出的产物&#xff0c;电子商务网站是建立在企业与…

【Linux】gdb调试

目录 进入调试查看代码运行代码断点打断点查断点删断点从一个断点转跳至下一个断点保留断点但不会运行该断点 退出调试逐过程逐语句监视跳转至指定行运行结束当前函数 进入调试 指令&#xff1a;gdb 【可执行文件】&#xff1a; 查看代码 &#xff1a;l 【第几行】如果输入指…

KVM之QEMU Q35仿真程序-尚文网络xUP楠哥

~~全文共1106字&#xff0c;阅读需约5分钟。 进Q群11372462领取专属报名福利 &#xff01; # 说在前面 众所周知&#xff0c;KVM 虚拟化也被成为云计算平台的云底座&#xff0c;想要学习例如开源 OpenStack 或者国内云计算产品解决方案是需要先学习 KVM 虚拟化知识的&#xf…

进程间通信(匿名管道、命名管道、消息队列、共享内存、信号量、信号、Socket)

文章目录 一、什么是进程间通信二、管道1.匿名管道(pipe)a).创建匿名管道b).管道的读写规则c).匿名管道的特点 2.有名管道(FIFO)a).创建命名管道b).命名管道的特点c).基于命名管道的进程间通信&#xff08;服务端/客户端&#xff09; 三、消息队列四、共享内存1.什么是共享内存…

2023-2024-1高级语言程序设计-循环结构

7-1计算值控制的循环 求π的近似值 用公式求π的近似值&#xff1a;π2/611/221/321/42。。。 当求和项小于误差时,结束求和。 输入格式: 在一行输入误差范围 输出格式: 在一行输出π的近似值&#xff08;保留6位小数&#xff09;。 输入样例: 在这里给出一组输入。例如…

交通 | 网约车系统:框架与回顾

推文作者&#xff1a;祝心怡&#xff0c;香港理工大学在读博士生&#xff0c;研究方向:空陆交通一体化 编者按&#xff1a; 这篇文章全面概述了网约车系统&#xff0c;分别总结了网约车系统中四个主要的研究问题&#xff0c;并强调了该行业所面临的挑战和机遇。 随着互联网的…

【C】想练习C语言?通讯录的实现了解一下

目录 实现思路 开始实现 添加增加联系人功能 添加显示联系人信息的功能 添加删除联系人功能 添加查找指定联系人的功能 添加修改指定联系人的功能 测试 代码 Test.c Contact.c Contact.h 实现思路 1.通讯录中保存人的信息&#xff1a;名字、年龄、性别、电话、住址…

Camtasia2024永久激活码

真的要被录屏软件给搞疯了&#xff0c;本来公司说要给新人做个培训视频&#xff0c;想着把视频录屏一下&#xff0c;然后简单的剪辑一下就可以了。可谁知道录屏软件坑这么多&#xff0c;弄来弄去头都秃了&#xff0c;不过在头秃了几天之后&#xff0c;终于让我发现了一个值得“…

[Python进阶] 消息框、弹窗:tkinter库

6.16 消息框、弹窗&#xff1a;tkinter 6.16.1 前言 应用程序中的提示信息处理程序是非常重要的部分&#xff0c;用户要知道他输入的资料到底正不正确&#xff0c;或者是应用程序有一些提示信息要告诉用户&#xff0c;都必须通过提示信息处理程序来显示适当的信息&#xff0c…

CC001:CC照片建模

摘要&#xff1a;CC照片建模原理是通过从图像中提取特征点和特征描述符&#xff0c;然后根据特征点的匹配来计算相机的位姿&#xff0c;从而生成三维点云数据。最后&#xff0c;借助网格重建和纹理映射的方法&#xff0c;将点云转换为带有纹理的三维网格模型。 实验数据&#x…

【Java每日一题】——第四十题:设计一个Shape接口和它的两个实现类Square和Circle(2023.10.26)

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

windows上安装wsl(windows的linux子系统)

windows上安装wsl 说明 wsl(Windows Subsystem for Linux),windows的linux子系统。 我以为直接在微软应用商店直接下载想要安装的linux环境就可以了。 然而,出现了这个错误 Installing, this may take a few minutes... WslRegisterDistribution failed with error: 0…

递归神经网络 (RNN)

弗朗西斯科佛朗哥 一、说明 循环神经网络非常有趣&#xff0c;因为与前馈网络不同&#xff0c;在前馈网络中&#xff0c;数据只能在一个方向上传播&#xff0c;每个神经元可以与连续层的一个或多个神经元连接&#xff0c;在这种类型的网络中&#xff0c;神经元还可以环回自身或…

Java和Linux脚本操作:如何实现自动化测试?

Java和Linux脚本操作&#xff1a;实现自动化测试的方法与示例 引言&#xff1a; 在软件开发过程中&#xff0c;自动化测试能够极大地提高测试效率和质量。通过使用Java语言和Linux脚本&#xff0c;我们可以编写强大的自动化测试脚本&#xff0c;实现自动化执行测试用例、生成测…

shopee哪个站点好做

Shopee是一个跨国电子商务平台&#xff0c;拥有许多不同的站点&#xff0c;分布在亚洲和其他地区。哪个Shopee站点适合做生意要取决于你的产品、目标市场和其他因素。以下是一些考虑因素&#xff1a; 1、目标市场&#xff1a;首先要确定你想要销售的产品的目标市场是哪里。不同…

Transformer-深度学习-台湾大学李宏毅-课程笔记

目录 参考Seq2seqSequence-to-sequence&#xff08;Seq2seq&#xff09;适用任务语音识别机器翻译语音翻译语音合成聊天机器人自然语言处理硬解任务&#xff1a;文法分析硬解任务&#xff1a;多标签分类硬解任务&#xff1a;目标检测 Sequence-to-sequence&#xff08;Seq2seq&…

《动手学深度学习 Pytorch版》 10.5 多头注意力

多头注意力&#xff08;multihead attention&#xff09;:用独立学习得到的 h 组不同的线性投影&#xff08;linear projections&#xff09;来变换查询、键和值&#xff0c;然后并行地送到注意力汇聚中。最后&#xff0c;将这 h 个注意力汇聚的输出拼接在一起&#xff0c;并且…

0024Java程序设计-毕业论文管理系统的设计与实现

文章目录 **目录**系统设计开发环境 随着高校的规模不断扩大,如何合理地利用教学资源、有效地加强教学管理工作,已成为各大高校关注的焦点。目前,在教学管理方面,特别是在学生学籍管理、成绩管理等方面都普遍采用了网络化管理手段,而对于课程设计这一重要的教学环节,则普遍采用…