el-table 翻页多选（同时支持回显已选的接口返回数据）、选择框禁选

el-table 翻页多选（同时支持回显已选的接口返回数据）、选择框禁选

1、翻页多选

实现：:row-key=“getRowKeys” 配合:reserve-selection=“true”

<el-table
   :data="list"
   :row-key="getRowKeys"
   ref="multipleTable"
   @selection-change="handleSelectionChange"
 >
   <el-table-column type="selection" width="35" :reserve-selection="true"> </el-table-column>
</el-table>


methods: {
	getRowKeys(row){
       return row.id
    },
    // 接口获取表单数据
    getList(){
        let _query = {}; // 请求参数
    	request({
	        url: `/api/info/projectBase/getList`,
	        method: "post",
	        data: _query,
	      }).then((res) => {
	        this.list = res.data.list;
	        this.total = res.data.pagination.total;

			// 处理表单数据，已选数据和翻页选择的数据反显在表单中
	        let flag = this.selectedProject.findIndex(subItem => subItem.projectId == item.id)
            let flag1 = this.multipleSelection.findIndex(subItem => subItem == item.id)
            if(flag != -1 || flag1!= -1){
              this.$refs.multipleTable.toggleRowSelection(item)
            }
	    }
	},
	// 接口获取已选数据
	getProjectList() {
      let _query = {};
      request({
        url: `/api/process/TaskProject/getList`,
        method: "post",
        data: _query,
      }).then((res) => {
        this.selectedProject = JSON.parse(JSON.stringify(res.data.list));
      });
    },
	handleSelectionChange(val) {
      this.selectData = val;
      const res = val.map((item) => item.id);
      this.multipleSelection = res;
    },
}

2、选择框禁选

实现：type="selection"的列绑定selectable方法。

<el-table-column
    type="selection"
    width="50"
    :selectable="selectEnable">
</el-table-column>

methods: {
	selectEnable(row, rowindex) {
	  // 这里可以根据数据某个特性控制是否禁止选择
      return true;
    }，
}