1.重现代码如下:
<el-table
id="self-table"
:data="sdfslist"
height="400"
border
:row-key="getRowKeys"
@selection-change="handleSelectionChange"
@select="selectOne"
style="width: 100%"
ref="multipleTable"
v-loading="listLoading"
:row-style="tableRowClassName">
<el-table-column
type="selection"
:reserve-selection="true"
width="55"
></el-table-column>
......
......
......
<el-table-column
fixed
style="background: #ffcc99"
label="姓名"
min-width="230px"
align="center"
>
<template slot-scope="{ row }">
<span>{{ row.closeno }}</span>
</template>
</el-table-column>
<el-table-column
fixed
style="background: #ffcc99"
label="标号"
min-width="200px"
align="center"
>
<template slot-scope="{ row }">
<span>{{ row.clsa}}</span>
</template>
</el-table-column>
</el-table>
<el-checkbox v-model="allCheck" @change="allCheckEvent">全选</el-checkbox>
data() {
return {
sdfslist: [],
tableKey: 0,
multipleSelection: [],
allCheck: false,
};
},
watch: {
sdfslist: {
handler(value) {
if (this.allCheck) {
let that = this;
let len = that.multipleSelection.length;
value.forEach((row) => {
for (let i = 0; i < len; i++) {
if (row.autoid === that.multipleSelection[i].autoid) {
that.$refs.multipleTable.toggleRowSelection(row, false);
break;
} else {
that.$refs.multipleTable.toggleRowSelection(row, true);
}
}
});
}
},
deep: true,
},
},
methods:{
selectOne() {
if (this.allCheck) {
this.allCheck = false;
}
},
getRowKeys(row) {
return row.autoid; //唯一标识例如id...等
},
allCheckEvent() {
if (this.allCheck) {
this.sdfslist.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row, true);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
tableRowClassName({ row, rowIndex }){
//判断是否相等,相同时改变背景颜色
let list = this.multipleSelection.find((item) => item.autoid === row.autoid);
if (list !== undefined) {
rowBackground.background = "#9FBBFF"
//rowBackground.color = "red" //字体颜色
return rowBackground
} else {
return "";
}
},
},
2.效果图: