最近项目中有这个一个需求：请求后端列表数据，根据数据中remark值自动设置table的勾选框的勾选状态及禁用状态， 如果remark=“1”,是勾选状态且该勾选框变为禁用状态；反之，如果remark !=“1”，则不是勾选状态且用户可以进行勾选 当用户手动进行勾选某行数据时，该操作将向后端发送请求，请求成功则该行数据所对应的的勾选框状态为勾选且禁用
1、app.vue文件的部分代码如下
<el-table ref="table" :data="tableData" stripe border @select="selectSingle" <!--单独勾选某行数据的勾选框--> @select-all="selectAll" <!--勾选头部勾选框，进行全选或者全不选--> > <el-table-column type="selection" fixed width="50" align="center" :selectable="selectable" <!--设置禁用或非禁用状态--> > <el-table-column v-for="(item,index) in tableHeader" :key="index" :width="item.width" :label="item.label" align show-overflow-tooltip > <template slot-scope="scope"> <template v-if="item.label==="盘符"> <span>{{scope.row.name}}</span> </template> <template v-if="item.label === '硬盘总容量'"> <span>{{ scope.row.romTotal }}GB</span> </template> <template> </el-table-column> </el-table> export default { name:'app', data(){ return { tableData:[],// 表格数据 tableHeader:[ //表格头部 { label: '盘符', width: '150', }, { label: '硬盘总容量', width: '150', } ], } }, methods:{ //一、获取列表数据 storageList(){ serviceApi.storageList({}).then(res => { if(res.data.successFlg && res.data.data){ //1、获取列表数据，存入tableData this.tableData = res.data.data ? res.data.data : []; //2、筛选出remark为“1”的数据，该数据勾选状态需要设置为勾选且禁用 if(this.tableData.length > 0){ let checkedData = this.tableData.filter((item) => { return item.remark === '1'; }); let $this = this; //3、一定要使用this.$nextTick()，等数据都渲染到表格中再设置勾选状态，否则直接使用$this.$refs.table.toggleRowSelection(item);没有效果 this.$nextTick(() => { if(checkedData.length > 0){ checkedData.forEach((item) => { //toggleRowSelection(row, selected)方法接受两个参数，row传递被勾选行的数据，selected设置是否选中 $this.$refs.table.toggleRowSelection(item，true); }); } }); } } }).catch(err => { console.error(err); }); }, //二、单独勾选表格中某条数据所对应的勾选框 selectSingle(selection,row){ let data = { remark:'1', id:row.id }; serviceApi.saveMediaStorageSpace(data).then(res => { if(res.data.successFlg && res.data.data){ this.$message.success('成功'); this.storageList();//列表数据刷新 }else{ this.$message.error('失败'); } }).catch(err => { console.error(err); }); }, //三、勾选头部的勾选框，进行全选 selectAll(selection){ if(selection.length > 0){//length>0表示全选，length=0为全不选 selection.forEach((item) => { let data = { remark:1, id:item.id }; serviceApi.saveMediaStorageSpace(data).then(res => { if(res.data.successFlg && res.data.data){ this.$message.success('成功'); this.storageList();//列表数据刷新 }else{ this.$message.error('失败'); } }).catch(err => { console.error(err); }); }); } }, //四、设置表格中勾选框是否是禁用状态 selectable(row,index){ if(row.remark === '1'){ return false;//禁用状态 }else{ return true;//非禁用状态 } }, } }1、如果是表格中一开始没有数据，需要通过请求接口获取数据或者从其他途径获取数据的话， 那么一定要记得再获取完数据之后使用this. n e x t T i c k ( ) ， 在 t h i s . nextTick()，在this. nextTick()，在this.nextTick()的回调中使用el-table的toggleRowSlection()方法来设置勾选框的勾选状态 2、如果是静态数据的话，则可以直接使用el-table的toggleRowSlection()方法来设置勾选框的勾选状态，例如：
export default { name:'app', data(){ return { tableData:[ { name:'c', romTotal:22 }, { name:'d', romTotal:11 }, { name:'f', romTotal:33 } ],// 表格数据 tableHeader:[ //表格头部 { label: '盘符', width: '150', }, { label: '硬盘总容量', width: '150', } ], } }, mounted(){ this.$refs.table.toggleRowSelection(tableData[0],true); } }