antd-vue中,点击table行高亮效果实现,自定义hover行 时的背景颜色
原博地址
·
可以延伸设置:默认第一行高亮
tableCurrRowId默认赋值为第一行id的值
效果图:
参考博客:原博地址
实现方法:
<a-table
:loading="tableLoading"
:columns="columns"
:data-source="tableData" 数据源
rowKey="id"
:rowClassName="rowClassName"
:customRow="customRow"
bordered>
</a-table>
data:
tableCurrRowId:'',//当前选中table行的id
columns:[
{
title: '序号',
scopedSlots: { customRender: 'num' }
},
{
title: '标签名称',
dataIndex: 'name',
key: 'name'
},
{
title: '',
key: 'action',
scopedSlots: { customRender: 'action' }
}
],
tableData = [
{ name: '1_MBBG1064_CG125D左盖(季风款_XINGE_2872)', id: '1' },
{ name: '1_MBBG1064_CG125D左盖(季风款_XINGE_2873)', id: '2' },
{ name: '1_MBBG1064_CG125D左盖(季风款_XINGE_2873)', id: '3' },
{ name: '1_MBBG1064_CG125D左盖(季风款_XINGE_2873)', id: '4' },
{ name: '1_MBBG1064_CG125D左盖(季风款_XINGE_2873)', id: '5' },
{ name: '1_MBBG1064_CG125D左盖(季风款_XINGE_2873)', id: '6' },
{ name: '1_MBBG1064_CG125D左盖(季风款_XINGE_2873)', id: '7' },
{ name: '1_MBBG1064_CG125D左盖(季风款_XINGE_2873)', id: '8' },
{ name: '1_MBBG1064_CG125D左盖(季风款_XINGE_2873)', id: '9' },
{ name: '1_MBBG1064_CG125D左盖(季风款_XINGE_2873)', id: '10' }
]
methods:
customRow (record, index) {
return {
on: {
click: () => {
this.tableCurrRowId = record.id
console.log('点击了table行,id为-----', this.tableCurrRowId)
}
}
}
},
rowClassName (record, index) {
// return 'white'
return (record.id === this.tableCurrRowId) ? 'blue' : 'white'
}
/deep/.ant-table-tbody .white{
background-color: white !important;
}
/deep/.ant-table-tbody .blue{
background-color: #bae7ff !important;
}
/deep/.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
//自定义table行hover上去的背景颜色
background: #bae7ff;
cursor: default;
}
更多推荐
已为社区贡献27条内容
所有评论(0)