// -----DOM-----
<div>
<Table border ref="selection" :columns="columns" :data="data" @on-selection-change="selectChange"></Table>
</div>
//-----初始化数据-----
mounted(){
this.columns =[
{
type: 'selection',
width: 60,
align: 'center'
},
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
]
this.data = [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 30,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
]
this.data.forEach(element => {
if(element.age == 18){
this.$set(element,'_disabled',true)
}
});
},
//-------table操作事件---------
methods: {
selectChange(row){
let that = this
**console.log('正常情况下-----不禁用checkbox选中时>>>>>打印选中行，取消选中，打印空数组', row);
console.log('问题情况下-----禁用checkbox选中时>>>>>打印选中行，取消选中，row不会置空', row);**
//初始化—————— disabled
this.data.filter(function(n) {
if(n.age != 18){
that.$set(n,'_disabled',false)
}
});
//禁用————————disabled
this.data.filter(function(n) {
row.filter(function(s) {
if(n.age!=s.age){
that.$set(n,'_disabled',true) // 禁用checkbox，iview选中/取消选中发生错乱
}
})
});
}
}
费了点时间，将on-selection-change事件更换为了on-select和on-select-cancel
<template>
<div>
<Table
border
ref="selection"
:columns="columns"
:data="data"
@on-select="selectChange"
@on-select-cancel="selectCancelChange"
></Table>
</div>
</template>
<script>
export default {
name: "test",
components: {},
data() {
return {
columns: [],
data: [],
};
},
created() {},
mounted() {
this.columns = [
{
type: "selection",
width: 60,
align: "center",
},
{
title: "Name",
key: "name",
},
{
title: "Age",
key: "age",
},
{
title: "Address",
key: "address",
},
];
this.data = [
{
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park",
date: "2016-10-03",
},
{
name: "Jim Green",
age: 24,
address: "London No. 1 Lake Park",
date: "2016-10-01",
},
{
name: "Joe Black",
age: 30,
address: "Sydney No. 1 Lake Park",
date: "2016-10-02",
},
{
name: "Jon Snow",
age: 30,
address: "Ottawa No. 2 Lake Park",
date: "2016-10-04",
},
{
name: "J1111on Snow",
age: 30,
address: "Ottawa1111 No. 2 Lake Park",
date: "2016-10-06",
},
];
this.data.forEach((element) => {
if (element.age == 18) {
this.$set(element, "_disabled", true);
}
});
},
methods: {
// selection：已选项数据 row：取消选择的项数据
selectChange(selection, row) {
// let that = this;
console.log(
"正常情况下-----不禁用checkbox选中时>>>>>打印选中行，取消选中，打印空数组",
selection
);
console.log(
"问题情况下-----禁用checkbox选中时>>>>>打印选中行，取消选中，row不会置空",
selection
);
console.log("----当前选中项", row);
const index = this.data.findIndex((item) => item.name === row.name); // 时间开发中使用id（唯一标识）替换
if (row._checked) {
row._checked = false;
this.$set(row, "_checked", false);
this.$set(this.data[index], "_checked", false);
} else {
row._checked = true;
this.$set(row, "_checked", true);
this.$set(this.data[index], "_checked", true);
}
// that.$set(n, "_disabled", true)
//初始化—————— disabled
// this.data.filter(function (n) {
// if (n.age != 18) {
// that.$set(n, "_disabled", false);
// }
// });
//禁用————————disabled
// this.data.filter(function (n) {
// selection.filter(function (s) {
// if (n.age != s.age) {
// that.$set(n, "_disabled", true); // 禁用checkbox，iview选中/取消选中发生错乱
// }
// });
// });
this.data.forEach((element) => {
if (element.age == 18) {
this.$set(element, "_disabled", true);
} else if (element.age === row.age) {
this.$set(element, "_disabled", false);
} else {
this.$set(element, "_disabled", true);
}
});
},
// selection：已选项数据 row：取消选择的项数据
selectCancelChange(selection, row) {
// console.log("取消选中", row);
const index = this.data.findIndex((item) => item.name === row.name); // 时间开发中使用id（唯一标识）替换
this.$set(row, "_checked", false);
this.$set(this.data[index], "_checked", false);
},
},
};
</script>
完美解决方案：
<template>
<div>
<Table border ref="selection" :columns="columns" :data="data">
<template #select="{row}">
<Checkbox v-model="row.sel" :disabled="row.dis" @on-change="selectChange(row)"></Checkbox>
</template>
</Table>
</div>
</template>
<script>
export default {
props: {
},
data() {
return {
columns: [
],
data: [],
selAll: [],
}
},
computed: {
},
mounted(){
this.columns =[
{
title:'',
width: 60,
slot:'select'
},
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
]
this.data = [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03',
dis: true,
sel: false,
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01',
sel: false,
dis: false,
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02',
sel: false,
dis: false,
},
{
name: 'Jon Snow',
age: 30,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04',
dis: false,
sel: false,
}
]
// this.data.forEach(element => {
// if(element.age == 18){
// this.$set(element,'_disabled',true)
// }
// });
},
methods: {
selectChange(row){
let that = this
console.log('row :>>选中行----- ', row);
if(row.sel){
this.selAll.push(row);
this.data.forEach(item=>{
if(item.age != row.age){
item['dis'] = true;
}
})
}else{
this.selAll.splice(this.selAll.findIndex(item=>{item.age == row.age}),1);
if(!this.selAll.length){
this.data.forEach(item => {
if(item.age != 18)
item.dis = false;
});
}
}
}
}
}
</script>
动态加载，获取数据后，根据数据循环按条件生成表格