小知识 el-table表格选中行和回显行(vue3)
<template>
<el-table
:data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange"
highlight-current-row
:row-class-name="rowClassName"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<!-- 其他列 -->
</el-table>
</template>
<script setup>
import { ref } from 'vue';
const tableData = ref([{ date: '2016-05-02', name: '王小虎', ... }, ...]); // 表格数据
const multipleSelection = ref([]); // 多选选中项
// 多选选中数据变化时触发
const handleSelectionChange = (val) => {
multipleSelection.value = val;
};
// 设置当前行样式
const rowClassName = ({ row, rowIndex }) => {
// 根据条件判断是否需要高亮显示
if (row.id === '特定ID') { // 假设有一个特定的ID标识需要高亮显示
return 'highlight-row';
}
return '';
};
</script>
<style>
/* 通过自定义类名来设置高亮样式 */
.highlight-row {
background-color: #f0f9eb; /* 浅绿色背景 */
}
</style>
这段代码展示了如何在Vue 3中使用Element Plus UI框架的el-table
组件实现选中行和特定行的高亮显示。selection-change
事件用于处理多选框选中项的变化,而highlight-current-row
属性和row-class-name
属性用于设置当前行高亮和自定义行样式。
评论已关闭