小白成长日记之前端：element-ui表格的默认勾选和禁用

问题引出

作为新手小白，在做了几个项目之后发现写新增编辑时经常会有各种名单人员的设置，在此做下记录。通常我的流程是打开人员名单窗口，点击添加再进入到新的窗口选择成员，然后反馈到人员名单窗口，就会涉及到进入添加成员窗口时对已添加成员保留勾选状态。

解决

人员名单窗口已添加成员名单数据记为selectedData，新增人员窗口的表格数据记为tableData。

新增人员窗口获取表格数据tableData时对数据做一下处理即可。(当然，表格数据可选择要设置多选，element直接手动给el-table添加一个el-table-column，设type属性为selection即可；)

例：

// 获取表格列表
getDataListApi(this.query).then(res => {
    this.tableData = res
    // 保持选中
    this.$nextTick(() => {
      this.selectedData.forEach((v, i) => {
        let idx = this.tableData.findIndex(item => item.id == v.teacherId)
        //通常两个窗口的数据即selectedData、tableData并不是完全相同的，
        //字段有时会有不同，但是指向是相同的，这里的tableData里的数据id字段在selectedData对应的是teacherId。
        if (idx != -1) { 
          //添加成员窗口的数据往往是复杂的，并且通常有分页，或者又分为不同的维度，需要再打开一个窗口等等。
          //所以当前获取的tableData数据里面可能并没有选择过成员，所以习惯上判断了一下idx
          this.$refs.multipleTableStus.toggleRowSelection(this.tableData[idx], true)
          //multipleTableStus是添加成员窗口的el-table的ref值，toggleRowSelection(row, selected)是el-table的api，官方解释：用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中），row是当前行的表格数据。
        }
        })
    })
})

延伸（表格某行禁选）

我们公司目前的逻辑都是在成员名单窗口移除已添加的成员，所以我在处理已选择人员保持选中状态时通常会设置为禁选状态。在新增人员窗口已选择人员名单的数据的状态就是打开窗口时默认保持勾选状态并且不能取消勾选，以免引起不必要的麻烦（摊牌了，小菜鸡一枚怕不会处理可能出现的问题）。当然，在新增人员窗口还没有提交反馈到成员名单列表窗口的新成员肯定还是可以随意切换选中状态的。

一、给多选复选框那一列添加一个属性selectable，用于设置是否可以勾选

<el-table-column type="selection" align="center" :selectable="checkSelectSet" />

二、设置哪行禁选

  // 哪行禁选
    checkSelectSet(row, index) {
      // console.log(row)
      //row 就是每行的数据，在这里的row对应的就是tableData的每一项数据
      var data = this.selectedData//已选择的成员名单
      return data.findIndex(item => item.teacherId == row.id) === -1//同样，teacherId和id指向一样，tableData里的数据id字段在selectedData对应的是teacherId
      //return : false  就是禁用
      //return : true  不禁用
    }