antd vue table 设置点击行(更改颜色、radio选中)
1、绑定 customRow2、绑定rowClassName<a-table:customRow="onClickRow":rowClassName="rowClassName":columns="columns":dataSource="dataSource":rowKey="rowKey":pagination="pagination":row-selection="{ type: se
·
1、绑定 customRow
2、绑定rowClassName
<a-table
:customRow="onClickRow"
:rowClassName="rowClassName"
:columns="columns"
:dataSource="dataSource"
:rowKey="rowKey"
:pagination="pagination"
:row-selection="{ type: selectType,selectedRowKeys: selectedRowKeys,onChange:onSelectChange}"
@change="handleTableChange">
</a-table>
3、在data中声明selectIndex
data() {
return {
selectIndex: null
}
}
4、监听点击行
5、给当前行添加class
//点击当前行后进行判断返回class
rowClassName(record, index) {
return index === this.selectIndex ? 'Rowactive' : ''
},
// 点击一行事件
onClickRow(record, index) {
let that = this
return {
on: {
click: () => {
if (that.selectType === 'radio') {
//当前行的索引
that.selectIndex = index
//当前table是radio的情况下,点击当前行选中
that.selectedRows = []
that.selectedRowKeys = []
that.selectedRows.push(this.dataSource[index])
that.selectedRowKeys.push(that.dataSource[index].templateId)
}
}
}
}
}
*不生效(说明当前项目不存在Rowactive)
*Rowactive不能写在scoped当中,而应写在全局样式中
.Rowactive>td {
background-color: #e6f7ff !important;
}
更多推荐
已为社区贡献1条内容
所有评论(0)