最近项目中有这个一个需求：请求后端列表数据，根据数据中remark值自动设置table的勾选框的勾选状态及禁用状态，
如果remark=“1”,是勾选状态且该勾选框变为禁用状态；反之，如果remark !=“1”，则不是勾选状态且用户可以进行勾选
当用户手动进行勾选某行数据时，该操作将向后端发送请求，请求成功则该行数据所对应的的勾选框状态为勾选且禁用
难点及坑：axios请求后端数据成功时，初始化表格的时候，使用el-table的toggleRowSelection()方法设置勾选框状态一直设置失败
解决如下
1、app.vue文件的部分代码如下
HTML
<el-table ref="table":data="tableData"stripeborder@select="selectSingle" <!--单独勾选某行数据的勾选框-->@select-all="selectAll"<!--勾选头部勾选框，进行全选或者全不选-->><el-table-columntype="selection"fixedwidth="50"align="center":selectable="selectable" <!--设置禁用或非禁用状态-->><el-table-columnv-for="(item,index) in tableHeader":key="index":width="item.width":label="item.label"alignshow-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>
JS
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、获取列表数据，存入tableDatathis.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.nextTick()，在this.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);}}
