element ui table的使用备注

element ui table的使用备注

当给table设置了row-class-name时,选中的行高亮显示,但是当鼠标移入时(hover),会保持原有的hover,设置的会被覆盖,所以需要将原hover样式改变掉,但是由于table的hover属性是绑定在列td上的,所以需要在hover上增加td属性。

<el-table :data="data" border size="small" style="width: 100%" :row-class-name="tableRowClassName">
    <el-table-column width="70" align="center">
        <template #default="scope">
                    ...
        </template>
    </el-table-column>
</el-table>

const tableRowClassName = ({ row, rowIndex }) => {
    if (row.isShortList) {
       return 'shortList-row';
    }
     return '';
};

<style lang="less">
.el-table .shortList-row {
    background: #fcf6aa !important;
    &:hover > td {
        background: #fcf6aa !important;
    }
}
</style>

版权声明:本文为wang_xiao_ye原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。