1: 可以将表格内容highlight 显示, 方便区分 [成功, 信息, 警告, 危险] 等内容。
可以通过指定Table 组件的row-class-name 属性来为 Table 中某一行添加class 属性, 表明该行处于某种状态。
2: <template>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
>
<el-table-column
prop="date"
label="日期"
width="180"
>
</el-table-column>
</el-table>
</template>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
<script>
methods: {
tableRowClassName({row, rowIndex}) {
if(rowIndex === 1) {
return "warning-row"
}else if(rowIndex === 3) {
return "success-row"
}
return ""; // 返回值为空
}
}
</script>
// 当纵向内容过多时: 可以设置表头固定高度。 只需要在el-table 中定义height 属性, 即可实现固定表头的表格, 而不需要额外的代码。
// 多级表头的构建 数据结构比较复杂的时候, 可以使用多级表头来展示数据的层次。
只需要在el-table-column 里边嵌套的el-table-column, 就可以实现多级表头。
el-table 带状态的表格
最新推荐文章于 2024-07-10 16:18:57 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)