[Vue]Ant Design Vue Table表格行修改样式

[Vue]Ant Design Vue Table表格行修改样式

通常情况

通过rowClassName和css修改样式即可

<a-table
         :columns="columns"
         :data-source="markerArr"
         size="small"
         :pagination="false"
         :customRow="onClickRow"
         :rowClassName="my-row"
         height="250"
         >
</a-table>

<style>
    .my-row td{
        background: red;
    }
</style>

选中行样式

<a-table
         :columns="columns"
         :data-source="markerArr"
         size="small"
         :pagination="false"
         :customRow="onClickRow"
         :rowClassName="setRowClassName"
         height="250"
         >
</a-table>

const methods = {
    // 选中行
    onClickRow(record) {
        return {
            on: {
                click: () => {
                    // console.log(record, '选中行')
                    this.rowid = record.uid
                },
            },
        }
    },
    // 选中行添加类
    setRowClassName(record) {
        return record.uid == this.rowid ? 'clickRowSty' : ''
    },

}

css

/deep/ .clickRowSty {
    background-color: #1890ff;
    color: #fff;
}
/deep/ .clickRowSty:hover > td {
    background-color: #1890ff;
}
/deep/ .ant-table-tbody > tr > td {
    cursor: pointer;
}

hover划过样式

修改全局或者当前页面的table

.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
    background: #C8E7F7 !important;
}

/deep/说明

使用了外届的组件或者自己开发一个组件，修改一处就可能会影响到用这个组件的所有样式，所以就需要有一个方法或者方式，既不影响到别的地方，又能修改子组件在当前的样式，/deep/就能实现。
比如给组件加：

<style scoped>
/deep/ .title{
    color: ‘#999’;
}
</style>

这样就不会影响项目里使用这个公共组件的其他地方的样式。