最近的项目请求后端列表数据，并根据数据中的remark值自动设置table复选框的复选状态和禁用状态。
如果remark=“1”，则表示选中，复选框处于禁用状态。 相反，remark！=“1”时，不是检查状态，而是用户可以检查
如果用户手动选中行数据，则该操作会将请求发送到后端，如果请求成功，则会选中与该行数据对应的复选框，并禁用该操作
难点和漏洞：在axios请求后端数据成功、初始化表单时，使用El-table togglerowselection ()方法设置复选框状态以解决失败) 1、app.vue文件的
HTML
El-table ref=' table ' : data=' tabledata ' stripe border @ select=' select single '！ -单独选中某行中数据的复选框-- @select-all='selectAll '！ -选中头部的复选框，然后选择全部，或者单击、 或根本不选择--El-table-columntype=' selection ' fixed width=' 50 ' align=' center ' : selectable=' selectabled e-column v-for=' (项目， index ) in table header ' : key=' index ' : width=' item.width ' 3360 label=' item.label ' alignshow-overflow-tool tititititttttttttte }/span/templatetemplatev-if=' item.label=='硬盘总容量''''
exportdefault{name:'app '，data () return ) tabledata: )、//表数据tableheader:(/表头) { label 3: }驱动器}、methods:{ //一、列表数据storageList () serviceAPI.storagelist ) }.then(RES=(if ) RES.data.successsflist ) res.data.data : []； //2、筛选remark为“1”的数据，将该数据的检查状态设定为检查，需要禁用if(this.tabledata.length0) letcheckeddata=this.0 let $this=this； //3，请确保使用this.$nextTick ()将所有数据渲染到表中，然后复选标记，或$ this.$ refs.table.togglerowselection ) iterowselection 无效this.$nextTick () )={if ) checkeddata.length0) checkeddata.foreach ) (item )={ //toggleRowSelecti
on(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()方法来设置勾选框的勾选状态，例如：