给el表格多选框增加是否选中字段

原创于 2021-05-24 11:00:31 发布 · 268 阅读

本内容遵循CC 4.0 BY-SA版权协议

在Vue项目的开发中，经常需要在表格组件的第一行添加多选框来实现行选择功能。本文介绍了如何通过tableData中的一个额外字段`flag`来判断并控制表格行的选中状态，利用`$refs.table.toggleRowSelection`方法在数据更新时动态调整选中状态。这在需要根据选中状态执行相应操作的场景下非常实用。

在使用el的表格组件时我们经常会遇到在表格第一行加一个多选框，有些情况下我们需要判断当前行的多选框是否被选中而进行一些操作，所以就需要增加一个字段进行判断当前行是否被选中
在这里插入图片描述

 tableData(newVal) {
      //是否默认勾选
      this.$nextTick(() => {
        if (newVal && this.type != "selection") return;
        for (let i = 0; i < this.tableData.length; i++) {
          this.$refs.table.toggleRowSelection(this.tableData[i], this.tableData[i]["flag"] ? true : false);
        }
      });
    },