ant-design-vue table组件修改 选中行背景颜色
<a-table:rowKey="(row, index) => {return index;}":pagination="false":columns="columns":data-source="data..
·
<a-table
:rowKey="
(row, index) => {
return index;
}
"
:pagination="false"
:columns="columns"
:data-source="data"
:showHeader="false"
:rowClassName="rowClassName"
:customRow="customRow"
:bordered='false'
>
</a-table>
customRow(record, index) {//选中行
return {
on: {
click: () => {
this.tableCurrRowId = record.id;
console.log(this.tableCurrRowId)
},
},
};
},
rowClassName(record, index) {
//选择行后设置颜色
//return 'white'
return record.id === this.tableCurrRowId ? "blue" : "white";
},
/deep/.ant-table-tbody .white {
background-color: #fff !important;
height: 40px !important;
border: none !important;
padding: 0 !important;
}
/deep/.ant-table-tbody .blue {
background-color: rgba(39, 111, 255, 0.1) !important;
height: 40px !important;
border: none !important;
padding: 0 !important;
}
更多推荐
已为社区贡献2条内容
所有评论(0)