<el-table
v-show="res"
border
ref="multipleTable"
:data="projectList"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
@select="handleSelection"
@row-click="clickRow"
:row-class-name="tableRowClassName"
>
<el-table-column type="selection" width="30"></el-table-column>
<el-table-column label="ID" align="center" prop="id">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column label="項(xiàng)目名稱" align="center" prop="name">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<el-table-column label="征收范圍" align="center" prop="levy_scope">
<template slot-scope="scope">{{scope.row.levy_scope}}</template>
</el-table-column>
<el-table-column label="拆遷公司" align="center" prop="actuator">
<template slot-scope="scope">{{scope.row.actuator}}</template>
</el-table-column>
</el-table>
.el-table >>> .warning-row {
background-color: #f5f7fa;
}
點(diǎn)擊選框 點(diǎn)擊整行 都可以變色
handleSelectionChange(val) {
this.multipleSelection = val;
console.log("選擇框發(fā)生變化", val);
},
handleSelection(val, row) {
// 表單綁定的數(shù)據(jù)
this.projectList.forEach((item, i) => {
if (item.id == row.id) {
/* console.log(this.numbers.indexOf(i)) */
if (this.numbers.indexOf(i) == -1) {
this.numbers.push(i);
} else {
this.numbers.splice(this.numbers.indexOf(i), 1);
}
}
});
},
// 點(diǎn)擊整行選中
clickRow(row, event, column) {
this.$refs.multipleTable.toggleRowSelection(row);
this.projectList.forEach((r, i) => {
if (r.id == row.id) {
/* console.log(this.numbers.indexOf(i)) */
if (this.numbers.indexOf(i) == -1) {
this.numbers.push(i);
} else {
this.numbers.splice(this.numbers.indexOf(i), 1);
}
}
});
},
// 選中背景色
tableRowClassName({ row, rowIndex }) {
let color = "";
this.numbers.forEach((r, i) => {
if (rowIndex === r) {
color = "warning-row";
}
});
return color;
}
