Vue + ElementUI表格状态区分,row-class-name属性
通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class,表明该行处于某种状态。1.在表格组件上绑定row-class-name属性<el-tableref="multipleTable":data="tableList"tooltip-effect="dark"style="width: 100%"@selec
·
通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class,表明该行处于某种状态。
1.在表格组件上绑定row-class-name属性
<el-table
ref="multipleTable"
:data="tableList"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
border
:key="Math.random()"
:row-class-name="tableRowClassName"
>
<el-table-column
type="selection"
width="50"
align="center"
></el-table-column>
<template v-for="item in tableTitle">
<el-table-column
:label="item.label"
:key="item.prop"
:prop="item.prop"
min-width="90px"
align="center"
></el-table-column>
</template>
</el-table>
2.在样式中加入背景色
.el-table .info-row {
background: #e4e7ed;
}
3.根据业务需求添加方法(methods中)
tableRowClassName({ row, rowIndex }) {
if (row.isTop && row.isTop == 1) {
return "info-row";
}
return "";
}
注意:row-class-name属性与stripe = true互斥
如果你的表格把stripe 属性设为true,即斑马纹显示,后又设置了row-class-name属性,那row-class-name的效果不会完全体现,还是斑马纹,只是斑马纹的颜色变化了,即row-class-name属性与stripe = true互斥,不能同时存在!!!
更多推荐
已为社区贡献5条内容
所有评论(0)