vue Element-ui 表格多选 修改选中行背景色
<el-tablev-show="res"borderref="multipleTable":data="projectList"tooltip-effect="dark"style="width: 100%"@selection-change="handleSelectionChange"@select="handleSelection"...
·
<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="项目名称" 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;
}
点击选框 点击整行 都可以变色
handleSelectionChange(val) {
this.multipleSelection = val;
console.log("选择框发生变化", val);
},
handleSelection(val, row) {
console.log(o.id, "什么row", o);
// 表单绑定的数据
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);
}
}
});
},
// 点击整行选中
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;
}
转自:https://www.jianshu.com/p/47aa76b1450e
更多推荐
已为社区贡献4条内容
所有评论(0)