<template>
<el-table
class="table"
ref="table"
:data="tableData"
:row-class-name="row_class_name"
@selection-change="selection_change"
@row-click="row_click">
<el-table-column type="selection" width="50" />
<el-table-column prop="value" label="序号" width="50" />
<el-table-column prop="label" label="列名" minWidth="100" />
</el-table>
</template>
<script>
export default {
data() {
return {
selection: [],
tableData: [
{ label: '显示文本1', value: 1 },
{ label: '显示文本2', value: 2 },
{ label: '显示文本3', value: 3 },
{ label: '显示文本4', value: 4 },
{ label: '显示文本5', value: 5 },
],
}
},
methods: {
row_class_name({ row, rowIndex }) {
return this.selection.find(v => v.value == row.value) ? 'selected' : '';
},
selection_change(selection) {
this.selection = selection;
},
row_click(row, column, event) {
this.$refs.table.toggleRowSelection(row)
},
}
};
</script>
<style lang="scss" scoped>
.table {
>>>tr.selected {
$backgroundColor: #E6A23C; // 高亮选中行背景色
background-color: $backgroundColor ;
td {
background-color: $backgroundColor !important;
}
}
}
</style>
详解element-ui el-table表格中勾选checkbox(selection),高亮当前行高亮某一行(某一行设置特殊的样式)
于 2023-07-06 20:50:58 首次发布