el-table selection 回显选中 和 禁用

一、回显选中

1、type="selection"就是现实选框.

2、:row-key="row=>row.id"（必须是唯一的字段，例如：id）和:reserve-selection="true"是必要的，可以记录选中的数据，翻页也支持。

3、做好以上两步之后就是勾选选中项目了；就是遍历table数据比较已经选中的数据，表格中对已经选中的做toggleRowSelection操作.

  async getProductDeviceList() {
      const res = await getProductDeviceListAPI(this.companyId)
      this.productDeviceList = res.body
      this.handleSelected()
    },
    handleSelected() {
      if (!this.row.productDeviceIds) return
      this.multipleSelection = this.row.productDeviceIds.split(',').map(item => {
        return {
          id: item
        }
      })
// 克隆一下，循环的时候触发 handleSelectionChange multipleSelection就只有一条数据了
      const cloneSelectedData = structuredClone(this.multipleSelection) 
      setTimeout(() => {
        this.productDeviceList.forEach((item) => {
          if (cloneSelectedData.some(row => row.id === item.id)) {
            this.$refs.multipleTable.toggleRowSelection(item, true)
          }
        })
      })
    },

二、禁用逻辑

给 type="selection" 的列设置 selectable 属性,在对应方法里面写具体逻辑就可以。

 checkSelectable(row) {
      return !this.isAdmin
    },