element-ui ,table表格的反选

最新推荐文章于 2025-02-07 15:42:31 发布

7束QW

最新推荐文章于 2025-02-07 15:42:31 发布

阅读量732

点赞数

文章标签： vue.js elementui scss

本文链接：https://blog.youkuaiyun.com/V8min/article/details/121115235

版权

本文介绍如何在Element UI的Table组件中实现反选功能。在编辑或查看模式下，确保已选择的表格项呈选中状态，通过比较选定数据与表格数据，将匹配的行设置为选中状态。此功能适用于Vue.js项目，借助SCSS进行样式定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

反选就是顾客选择的数据在顾客编辑查看的时候要是已选择的状态，让顾客知道那些是已经选择了的。

重点：

我们的思想是把我们已经选择的数据和表格的数据做判断，因为我们选择的数据是从表格里面选择的，所以他们一定会有相同的数据，我们就让他们相同的数据显示被选中的状态就可以了。

watch: {
    tableData: {
      immediate: true,
      deep: true,
      handler(list) {
        if (list.length) {
          this.tableData.forEach(item => {
            this.dialogInfo.forEach(val => {
              if (item.positionId === val.positionId) {
                this.$nextTick(() => {
                  this.refInfo.toggleRowSelection(item, true)
                })
              }
            })
          })
        }
      }
    }
  },

tableData是表格的数据，dialogInfo是顾客已经选择的数据，我们要拿到这两个数据循环做判断，如果他们的Id相同，那我们就让表格里面的这条数据是被选中的状态，refInfo是获取dom的节点，也就是$ref,我这边是封装的$ref，
这边是要写在监听函数里面的，因为我们有添加和编辑查看的两个操作，所以我们要监听dialogInfo是否有数据，如果是添加那么dialogInfo是为空的，也就不会有被选中的状态，如果是编辑，那么dialogInfo可能有值也可能是空，如果有值那就循环判断ID，ID相同的就显示被选中状态，如果是空，那就和添加一样的，不做任何操作。toggleRowSelection的使用方法element-ui组件里面有，我这边就不做过多的介绍了。