html多选框默认选中不可更改,饿了么UI elementUI中的el-table勾选框设置默认勾选、禁用...

最近项目中有这个一个需求：请求后端列表数据，根据数据中remark值自动设置table的勾选框的勾选状态及禁用状态，

如果remark=“1”,是勾选状态且该勾选框变为禁用状态；反之，如果remark !=“1”，则不是勾选状态且用户可以进行勾选

当用户手动进行勾选某行数据时，该操作将向后端发送请求，请求成功则该行数据所对应的的勾选框状态为勾选且禁用

难点及坑：axios请求后端数据成功时，初始化表格的时候，使用el-table的toggleRowSelection()方法设置勾选框状态一直设置失败

解决如下

1、app.vue文件的部分代码如下

HTML

@select-all="selectAll"

>

>

{{scope.row.name}}

{{ scope.row.romTotal }}GB

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、获取列表数据，存入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.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);

}

}