elementUI-plus虚拟表el-table-v2 checkbox删除后,下一个复选框又被选中且无法删除

news2024/12/31 7:15:16

虚拟表种设置了checkbox,但是删除时,发现删除后,下一个checkbox自动被选中,且删除时,报错找不到id

  1. 没有设置row-key

每行的 key 值,如果不提供,将使用索引 index 代替

2.row-key值设置成什么值?

如果数据没有经过特殊处理,直接使用数据种的id即可。如此处我的数据是resourceData,直接设置为resourceData.id即可

    <el-auto-resizer>
      <!--行高 :row-height="36" -->
      <template #default="{ height,width}">
        <el-table-v2
          :columns="columns"
          :data="resourceData"
          :width="width"
          :height="height"
          :row-height="36"
          :row-key="resourceData.id"
          fixed
        />
      </template>
    </el-auto-resizer>

3.对数据column列名进行过特殊处理时

如果对数据做了特殊处理,如下,我对数据进行处理前即表头的列名,由中文转为英文

// 将英文列名改为中文列名(id不显示)
const transferColumnName = (columnIndex) =>{
  // id,programId,fileType,reason,lastProductionVersion,productionVersion,submitter,server
  // recordTime,setted,settedTime,finishTime,uatTime,deployABy,testABy,deployBBy,operations
  let cnColumnNameArr = ['WFD名称','文件类型','提交原因','上个版本号','生产版本号','提交人','地址'
  ,'提交时间','状态','SIT部署时间','SIT测试完成时间','UAT部署时间','SIT已部署','SIT已测试','SIT部署完成','操作'];
  return cnColumnNameArr[columnIndex];
}

// 生成列名
const generateColumns = (columnsArr) =>
  columnsArr.map((item, columnIndex) => {
    item = transferColumnName(columnIndex);
    return {
      key: `${item}`,
      dataKey: `${item}`,
      title: `${item}`,
      // 通过函数设置width值
      width: calculateWidth(columnIndex),
    };
  })

这样处理后,vue proxy数据都会具有响应性,所以找不到id了

解决:只要在设置复选框时,再设置一个id给行数据即可

绑定数据的id为,然后row-key才能使用id 。rowData.id = rowData[0];

const customizeColumns = (columnsVal) =>{
  // 全选按钮:在数组头部添加
  columnsVal.unshift({
      key: 'selection',
      dataKey: 'selection',
      title: 'selection',
      width: 30,
      cellRenderer: ({ rowData }) => {
        // 绑定数据的id,然后row-key才能使用id
         rowData.id = rowData[0];
        const onChange = (value) => {
          rowData.checked = value
          if(rowData.checked){
            selectedId.value.push(rowData[0]);
          }else{
            let idIndex =selectedId.value.findIndex(item=>item===rowData[0]);
            selectedId.value.splice(idIndex,1);
          }
          return rowData.checked;
        }
        return <SelectionCell value={rowData.checked} onChange={onChange} />
      },

      headerCellRenderer: () => {
        const _data = unref(resourceData)
        const onChange = (value) =>
          (resourceData.value = _data.map((row) => {
            row.checked = value;
            // 全选id设置
            if(row.checked){
              selectedId.value.push(row[0]);
            }else{
              selectedId.value = [];
            }
            return row;
          }))
          // 全选
        const allSelected = _data.every((row) => row.checked)
        // 非全选
        const containsChecked = _data.some((row) => row.checked)
        return (
          <SelectionCell
            value={allSelected}
            intermediate={containsChecked && !allSelected}
            onChange={onChange}
          />
        )
      },
    })

4.总结

和vue 的 :key一个原理,必须设置循环数据的唯一值,才能在操作时定位到唯一数据。其他bug就是编码问题了

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

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

相关文章

openwrt开发板与ubuntu nfs挂载

1.ubuntu需要安装nfs服务 sudo apt-get install nfs-common nfs-kernel-server2.修改 /etc/exports文件&#xff1a; /home/test *(rw,nohide,insecure,no_subtree_check,async,no_root_squash) 前面是挂载的目录&#xff0c;后边是相应权限 rw&#xff1a;读写 insecure&am…

Is ChatGPT a general-purpose natural language processing task solver?

声明&#xff1a;平时看些文章做些笔记分享出来&#xff0c;文章中难免存在错误的地方&#xff0c;还望大家海涵。搜集一些资料&#xff0c;方便查阅学习&#xff1a;http://yqli.tech/page/speech.html。语音合成领域论文列表请访问http://yqli.tech/page/tts_paper.html&…

Android常用9种自动化测试框架对比,Appium有哪些优势?

随着移动终端的普及&#xff0c;手机应用越来越多&#xff0c;也越来越重要。 App的回归测试用例数量也越来越多&#xff0c;全量回归也越来越消耗时间。移动 APP自动化测试 的难点移动 APP的UI自动化测试长久以来一直是一个难点&#xff0c;难点在于UI的”变”, 变化导致自动化…

【数据结构】动态顺序表的接口实现(附图解和源码)

动态顺序表的接口实现&#xff08;附图解和源码&#xff09; 文章目录动态顺序表的接口实现&#xff08;附图解和源码&#xff09;前言一、定义结构体二、每一个接口的实现原理&#xff08;附图解&#xff09;1.初始化顺序表2.增容顺序表3.尾插数据4.删除顺序表信息&#xff08…

git rebase 和 git merge,实际工作使用

概述 git rebase是用来处理git merge命令所处理的同样的问题。 这两个命令都用于把一个分支的变更整合进另一个分支——只不过他们达成同样目的的方式不同。 场景&#xff0c;你在feature分支上开&#xff0c;另一位团队成员更新了main分支。这将会造成一个分叉的提交历史&am…

【Java|多线程与高并发】详解start()方法和run()方法的区别

文章目录前言1.start()方法和run()方法2.不能两次调用start()方法3.线程的执行是随机的start()方法和run()方法的执行顺序不一定相同4.run()方法由JVM调用public Thread(Runnable target)中的target前言 本篇文章主要讲解以下几个问题: start()方法和run()方法的区别与联系为…

python cartopy绘制扇形区域图/cartopy绘制北极部分区域

问题 当绘图时&#xff0c;往往并不需要绘制整块区域&#xff0c;而是想聚焦于局部地区&#xff0c;此时我们需要绘制扇形图。 在cartopy中&#xff0c;只提供普通正方形的框架&#xff0c;如果我们需要其他&#xff0c;边界&#xff0c;需要自己去绘制&#xff0c;最常见的是…

程序分析与神经网络后门

原文来自微信公众号“编程语言Lab”&#xff1a;程序分析与神经网络后门 搜索关注“编程语言Lab”公众号&#xff08;HW-PLLab&#xff09;获取更多技术内容&#xff01; 欢迎加入编程语言社区 SIG-程序分析&#xff0c;了解更多程序分析相关的技术内容。 加入方式&#xff1a;…

Nginx常用命令及具体应用(Linux系统)

目录 一、常用命令 1、查看Nginx版本命令&#xff0c;在sbin目录下 2、检查配置文件的正确性 3、启动和停止Nginx 4、查看日志&#xff0c;在logs目录下输入指令&#xff1a; 5、重新加载配置文件 二、Nginx配置文件结构 三、Nginx具体应用 1、部署静态资源 2、反向代…

MacOS Pytorch 机器学习环境搭建

学习 Pytorch &#xff0c;首先要搭建好环境&#xff0c;这里将采用 Anoconda Pytorch PyCharm 来一起构建 Pytorch 学习环境。 1. Anoconda 安装与环境创建 Anoconda 官方介绍&#xff1a;提供了在一台机器上执行 Python/R 数据科学和机器学习的最简单方法。 为什么最简单…

springmvc考研交流平台 java ssm mysql

随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;考研交流平台当然也不能排除在外&#xff0c;从备考资料、课程学习的统计和分析&#xff0c;在过程中会产生大量的、各种各样的…

头戴式耳机适不适合跑步、最好用的跑步耳机推荐

现在爱好运动、重视健康的人越来越多&#xff0c;并且这部分群体呈现几何级增长&#xff0c;而这其中又有很多人喜欢边跑步时边听音乐&#xff0c;所以现如今跑步时听音乐是基本上已经成为很多运动人士的刚性需求。但实际上真正适合运动跑步的耳机并不多&#xff0c;我跑步差不…

程序员的自我修养第七章——动态链接 (下)

接上一篇。 7.3 地址无关代码 对于现代机器来说&#xff0c;引入地址无关代码并不麻烦&#xff0c;我们展示下各种模型的地址引用方式&#xff1a; 1. 模块内部函数调用 2. 模块内部的数据访问&#xff0c;如全局变量、静态变量。 3. 模块外部的函数调用&#xff0c;跳转。 4.…

【算法基础】字典树(Trie树)

一、Trie树原理介绍 1. 基本概念 Trie 树,也叫“字典树”。顾名思义,它是一个树形结构。它是一种专门处理字符串匹配的数据结构,用来解决在一组字符串集合中快速查找某个字符串的问题。【高效存储和查找字符串集合的数据结构】,存储形式如下: 2. 用数组来模拟Trie树的…

SpringBoot 启动配置文件加载和参数配置修改问题

SpringBoot 配置文件修正和参数覆盖SpringBoot 配置文件加载和参数覆盖1、SpringBoot 配置文件加载1.1、修改application.properties的参数几种方式1.2、方法一&#xff1a;直接CMD1.3、方法二&#xff1a;系统变量配置1.4、方法三&#xff1a;程序运行配置1.5、方法四&#xf…

【从零开始学C语言】知识总结一:C语言的基本知识汇总

C语言期末知识点总结 C语言期末试题&#xff08;附答案&#xff09;选择题编程题 2022C语言知识点大全【详细、必备】 C语言期末大作业-学生成绩管理系统&#xff08;完整源码设计报告&#xff09; C语言期末作业&#xff08;15个&#xff09;-货物管理系统、歌曲信息管理系…

Linux软件管理RPM

目录 前言 RPM软件管理程序&#xff1a;rpm RPM默认安装的路径 PRM讲解前准备工作 RPM安装&#xff08;install&#xff09; RPM查询&#xff08;query&#xff09; RPM卸载&#xff08;erase&#xff09; RPM升级与更新&#xff08;upgrade/freshen&#xff09; RPM重…

高压放大器在介电泳效应的细胞分选研究中的应用

实验名称&#xff1a;高压放大器在介电泳效应的细胞分选研究中的应用研究方向&#xff1a;生物医学测试目的&#xff1a;细胞分选在分析化学和生物医药领域有着非常重要的应用。在众多的分选方法中&#xff0c;微流控分选方法以其响应速度快、样品需求少等优点成为研究热门。微…

订单超时处理方案介绍

在电商场景下&#xff0c;一个订单流程中有许多环节要用到超时处理&#xff0c;包括但不限于&#xff1a; 买家超时未付款&#xff1a;比如超过15分钟没有支付&#xff0c;订单自动取消。 商家超时未发货&#xff1a;比如商家超过1个月没发货&#xff0c;订单自动取消。 买家…

【数据结构与算法】数组2:双指针法 二分法(螺旋矩阵)

文章目录今日任务1.Leetcode977&#xff1a;有序数列的平方&#xff08;1&#xff09;题目&#xff08;2&#xff09;思路&#xff08;3&#xff09;暴力排序&#xff08;4&#xff09;双指针法2.Leetcode209&#xff1a;长度最小的子数组&#xff08;1&#xff09;题目&#x…