element-ui表格中的复选框默认选中状态、禁用状态以及默认选中不可取消状态_element tree默认选择的取消不了

一. 实现表格多选框

1.首先要想在表格中实现多选：需要手动添加一个el-table-column，设type属性为selection即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用show-overflow-tooltip属性，它接受一个Boolean，为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。

<el-table
    ref="multipleTable"
    :data="tableData3"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

二. 由于后台返回数据某些字段要求需默认选中

难点及坑：axios请求后端数据成功时，初始化表格的时候，使用el-table的toggleRowSelection()方法设置勾选框状态一直设置失败

1.如果字段SIGN_STAT为已签署则默认选中，其中row为数据每一项，第二参数为true则为选中，否则默认为没选中

 SelectionChange() {
      this.$nextTick(() => {
        let table = this.tableData3; // 从后台获取到的数据
        table.forEach(row => {
          if (row.SIGN_STAT == "已签署")
            this.$refs.multipleTable.toggleRowSelection(row, true);
        });
      });
    },
1
2
3
4
5
6
7
8
9

2.此方法在生命钩子函数中调用

 mounted() {
    this.SelectionChange();
  },
1
2
3

3.注意需要在el-table上面绑定ref=“multipleTable”

 <el-table
          ref="multipleTable"
          :data="tableData3"
          @selection-change="handleSelectionChange"
          @select='selectSingle'
          border
        >
1
2
3
4
5
6
7

三. 默认选中后的不可取消

1.给el-table添加 @select事件，该事件表示当用户手动勾选数据行的 Checkbox 时触发的事件，第一个参数为选中的数据，第二个参数为是否选中true或者false

 <el-table
          ref="multipleTable"
          :data="tableData3"
          @selection-change="handleSelectionChange"
          @select='selectSingle'
          border
        >
1
2
3
4
5
6
7

2.此事件又自动调用了上面提到的初始化自动默认勾选方法，即可完成默认选中并且不可取消

selectSingle(selection,row){
      if(row.SIGN_STAT == "已签署"){
         this.SelectionChange()
      }
    },
    
1
2
3
4
5
6

四. 禁用状态

1.给el-table-column添加selectable方法，仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选

  <el-table-column type="selection" width="95" :selectable="selectEnable" disabled="true"></el-table-column>
1

2.如下，如果数据某一条满足条件返回false可以选中，否则为true禁用

 //非已签署状态不可选中
    selectEnable(row, rowIndex) {
      if (row.SIGN_STAT !== "已签署") {
        return false;
      }
      return true;
    },
1
2
3
4
5
6
7

**总结：

1、如果是表格中一开始没有数据，需要通过请求接口获取数据或者从其他途径获取数据的话，
那么一定要记得再获取完数据之后使用this.nextTick()，在this.nextTick()，在this.nextTick()的回调中使用el-table的toggleRowSlection()方法来设置勾选框的勾选状态
2、如果是静态数据的话，则可以直接使用el-table的toggleRowSlection()方法来设置勾选框的勾选状态**