element-ui表格el-table列多选框勾选后,选中行高亮
时间: 2024-09-15 14:05:18 浏览: 107
在使用 Element UI 的 `el-table` 组件时,可以通过添加 `type="expand"` 的列,并在该列中使用 `el-checkbox` 来实现多选框功能。为了在勾选多选框后高亮显示整行,可以在表格数据中添加一个用于控制行高亮的字段,然后在 `el-table` 的 `row-class-name` 属性中绑定一个方法来根据这个字段返回不同的类名。
以下是一个示例代码片段:
```html
<template>
<el-table
:data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange"
row-class-name="highlight">
<el-table-column
type="expand"
width="650">
<template slot-scope="props">
<el-checkbox v-model="props.row.checked"></el-checkbox>
</template>
</el-table-column>
<!-- 其他列 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
// 表格数据
],
selectedRows: [] // 用于存储选中的行
};
},
methods: {
handleSelectionChange(val) {
this.selectedRows = val;
},
highlighting(row, index) {
return {
'highlight-row': this.selectedRows.some(item => item.id === row.id)
};
}
}
};
</script>
<style>
.highlight-row {
background-color: #f2f6fc; /* 你选择的高亮颜色 */
}
</style>
```
在这个例子中,`el-table` 使用了 `row-class-name` 属性,并绑定到 `highlighting` 方法。`highlighting` 方法检查当前行是否被选中,如果是,则返回一个包含 `'highlight-row'` 类名的对象,这样就会给该行添加一个高亮样式。
阅读全文