[JavaScript知识库]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>

阅读世界，共赴山海

423全民读书节，邀你共读