Vue element ui table，点击一行时选中这一行对应的复选框

最新推荐文章于 2024-08-08 09:00:01 发布

蠢蠢欲动的猫

最新推荐文章于 2024-08-08 09:00:01 发布

阅读量4.4k

点赞数 2

分类专栏： vue 文章标签： vue.js elementui

本文链接：https://blog.csdn.net/weixin_43987718/article/details/121663783

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何在Vue Element UI组件库中，通过监听表格行点击事件和复选框选择变化，实现点击表格行时选中对应的复选框。提供了`clickRow`、`rowClick`和`handleSelectionChange`三个关键方法的实现，用于单击选中、多选以及复选框单选操作，确保了选中状态的正确同步。

摘要由CSDN通过智能技术生成

12、Vue element ui table，点击一行时选中这一行对应的复选框

      <el-table
              @row-click="clickRow"
              ref="dataList"
              :data="tableData"
              :height="tableHeight"
              border
              stripe
              tooltip-effect="dark"
              @selection-change="onTableSelectChange"
              style="width: 100%"
      >

js对应的方法：

clearSelection : 清除选中状态

toggleRowSelection：选中复选框

1、单击

 clickRow(row, column, event) {
        // console.log(row)
        //   选已选中数据中判断当前点击的是否被选中
        if (this.listTableSelection[0] == row) {  // 选中的是已有的 取消选中
          this.listTableSelection = [];
          this.$refs['dataList'].clearSelection();
        } else {
          this.listTableSelection = [row];
          this.$refs['dataList'].clearSelection();
          this.$refs['dataList'].toggleRowSelection(row, true);
        }
      },

2、单击多选

rowClick(row, column, event) {  // 点击行多选
        // console.log(row)
        // 从已选中数据中 判断当前点击的是否被选中
        const selected = this.listTableSelection.some(item => item.id === row.id)  // 是取消选择还是选中
        if (!selected) { // 不包含   代表选择
          this.listTableSelection.push(row)
          this.$refs['multipleTable'].toggleRowSelection(row, true);
        } else { // 取消选择
          var finalArr = this.listTableSelection.filter((item) => {
            return item.id !== row.id
          })
          this.listTableSelection = finalArr  // 取消后剩余选中的

          this.$refs['dataList'].toggleRowSelection(row, false);
        }
        console.log('更改选择后', this.multipleSelection)
    },

3、table复选框单选点击复选框单选效果记录选中数据

handleSelectionChange(selection, row) {
      if (this.listTableSelection[0] == row) {
        this.listTableSelection = [];
        this.$refs['dataList'].clearSelection();
      } else {
        this.multipleSelection = [row];
        this.$refs['dataList'].clearSelection();
        this.$refs['dataList'].toggleRowSelection(row, true);
      }
    },