ElementUI之表格toggleRowSelection选中踩坑记录

 更新时间:2024年03月11日 10:38:06   作者:JACHJJ  
这篇文章主要介绍了ElementUI之表格toggleRowSelection选中踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

ElementUI表格toggleRowSelection选中踩坑

问题

toggleRowSelection选中不了

解决方法

this.$nextTick( ()=> {
})

问题原因分析

在选中的时候,DOM渲染不及,导致无法选中;

el-table中使用toggleRowSelection方法注意点

1.UI界面

产品设计想实现左侧选中的企微号列表数据在右侧展示已选的企微号,这里分页是记住分页选中的(使用了row-key和reserve-selection属性,这里就不多赘述了)。

  • 在右侧列表有清空按钮就是清空右侧已选的企微号,并且还原左侧为未选状态,这里方便实现使用了el-table组件中的clearSelection方法。
  • 在右侧列表的下面有一个 x号 出掉这条数据的选中状态,左侧对应的状态为未选。使用了toggleRowSelection方法,操作看也没用问题,但若左侧切换分页再切换到对应的选中的页面,再操作右侧的删除按钮,这里就出现了bug,对应的数据不但没有清除已选而且还追加一条数据。

2.代码示例

附录:在线代码截图,展示效果yyds 在线代码截图

3.代码块

代码块放上来,感觉也没有什么用

	//选择企微员工号
    handelOperationClick(val) {
      // this.selectOpeArr = val; // 选择回调函数直接赋值给变量,不要watch监听再存储数据
      this.operationArrId = [];
      this.operationArrName = [];

      // console.log(val, val.length);
      this.chosenList = val;
      // this.chosenList = JSON.parse(JSON.stringify(val))
      this.chosenTotal = val.length;
    },

	//单个删除
    handleByDel(row) {
      // this.chosenList.forEach((item, i) => {
      //   // if (item.mobile == row.mobile) {
      //   //   // return console.log(item);
      //   //   this.chosenList.splice(i, 1); //删除下标为i的元素
      //   //   return this.chosenList;
      //   // }

      //   if (item.id == row.id) {
      //     // return console.log(item);
      //     this.chosenList.splice(i, 1); //删除下标为i的元素
      //     this.$refs.moreTable.toggleRowSelection(row);
      //     return this.chosenList;
      //   }
      // });

      this.$refs.moreTable.selection.forEach((item, i) => {
        if (item.id == row.id) {
          this.$refs.moreTable.toggleRowSelection(item);
        }
      });
      /**
       * 使用el-table表格ref属性调用selection获取表格已选的,再操作toggleRowSelection方法
       * 这样分页再操作toggleRowSelection方法就不会出现多追加一条
       */
    },

4.解决办法

使用el-table表格ref属性调用selection获取表格已选的,再操作toggleRowSelection方法,这样分页再操作toggleRowSelection方法就不会出现多追加一条。

代码示例中开始使用@selection-change监听已选的数据,将其存储变量this.chosenList,再操作toggleRowSelection方法出现左侧分页右侧出现多追加一条数据。这里是分页选中的数据和@selection-change监听已选的数据指针地址不一致导致了。

也是看到网友博客里面这段方法写的,想试试的

console.info(this.$refs.multipleTable.tableData);
console.info(this.$refs.multipleTable);

打印了这个属性发现了selection这个方法正是已经选择的左侧列表,就想在这个属性获取的已选列表数据操作toggleRowSelection方法,试了看可以了,开始看网上文档找解决方法也没有说的,就记录一篇文档吧,今天上班有时间整理一下,哈哈。

这个方法实质是分页之后也获取已选的列表数据,之前的那种方式是在左侧已选的数据赋值给一个变量,当在分页这个地址和赋值变量this.chosenList的地址不一致了,这样分页再操作toggleRowSelection方法就出现多追加一条的问题。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 项目迁移vite引入图片资源报require is not defined问题的解决办法

    项目迁移vite引入图片资源报require is not defined问题的解决办法

    这篇文章主要给大家介绍了关于项目迁移vite引入图片资源报require is not defined问题的解决办法,文中通过代码介绍的非常详细,对大家学习或者使用vite具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-01-01
  • Vue实现色板功能的示例代码

    Vue实现色板功能的示例代码

    这篇文章主要为大家详细介绍了如何使用Vue实现色板功能,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解一下
    2023-06-06
  • vue实现路由不变的情况下,刷新页面操作示例

    vue实现路由不变的情况下,刷新页面操作示例

    这篇文章主要介绍了vue实现路由不变的情况下,刷新页面操作,结合实例形式分析了vue路由不变的情况下刷新页面具体原理、操作方法与相关注意事项,需要的朋友可以参考下
    2020-02-02
  • vue中如何使用lodash的debounce防抖函数

    vue中如何使用lodash的debounce防抖函数

    防抖函数 debounce 指的是某个函数在某段时间内,无论触发了多少次回调,都只执行最后一次,在Vue中使用防抖函数可以避免在频繁触发的事件中重复执行操作,这篇文章主要介绍了vue中使用lodash的debounce防抖函数,需要的朋友可以参考下
    2024-01-01
  • 在 Vue 中使用 iframe 嵌套页面的步骤

    在 Vue 中使用 iframe 嵌套页面的步骤

    这篇文章主要介绍了在 Vue 中使用 iframe 嵌套页面,使用 iframe 技术可以实现多个页面之间的数据传递和交互,提高了网站的整体性能和用户体验,需要的朋友可以参考下
    2023-05-05
  • vuex如何重置所有state(可定制)

    vuex如何重置所有state(可定制)

    在正式场景中我们经常遇到一个问题,就是登出页面或其他操作的时候,我们需要重置所有的vuex,让其变为初始状态,那么如何重置呢,下面就跟随小编一起来了解一下
    2019-01-01
  • vue项目中使用ts(typescript)入门教程

    vue项目中使用ts(typescript)入门教程

    最近项目需要将原vue项目结合ts的使用进行改造,本文从安装到vue组件编写进行了说明,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • Vue生命周期中的组件化你知道吗

    Vue生命周期中的组件化你知道吗

    这篇文章主要为大家详细介绍了Vue生命周期中的组件化,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • Vue如何指定不编译的文件夹和favicon.ico

    Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue移动端实现下拉刷新

    vue移动端实现下拉刷新

    我们通过原理讲解以及代码实例给大家分享了关于VUE实现移动下拉刷新的功能,有的朋友可以跟着学习下。
    2018-04-04

最新评论