a-table：表格组件常用功能记录—

a-table：表格组件常用功能记录——基础积累2

antd+vue是我目前项目的主流，在工作过程中，经常用到table组件。下面就记录一下工作中经常用到的部分知识点。

a-table：表格组件常用功能记录——基础积累2

效果图
1.table 点击行触发点击事件
- 1.1 实现单选点击事件
- 1.2 实现多选点击事件
- 1.3 实现行点击事件——不需要单选和多选
2.table 行样式调整——`rowClassName`

效果图

在这里插入图片描述

1.table 点击行触发点击事件

1.1 实现单选点击事件

如果要实现的单选功能，则需要在a-table上添加以下代码：

:row-selection="{selectedRowKeys: selectedRowKeys,type: 'radio',}"
:customRow="loadCustomRow"

1.2 实现多选点击事件

如果要实现的多选功能，则需要在a-table上添加以下代码：

:row-selection="{selectedRowKeys: selectedRowKeys,type: 'checkbox',}"
:customRow="loadCustomRow"

1.3 实现行点击事件——不需要单选和多选

:customRow="onCustomRow"

上面代码中的loadCustomRow方法如下：

loadCustomRow(record, index) {return {on: {click: () => {//监听的是单选框的点击事件console.log(record, index);},change: () => {//监听的是行的点击事件console.log(record, index);},},};
},

2.table 行样式调整——`rowClassName`

在a-table组件上添加:rowClassName="rowClassNameFn"

//行高亮
rowClassNameFn(row, index) {if (row.id == xxx) {//符合条件的要高亮或者其他样式return 'hightCls';}
},

对应的样式也要调整：

/deep/.ant-table-tbody > tr:hover > td {background: #fff;
}
/deep/.ant-table-tbody > tr.hightCls {background: #fff3e1 !important;
}
/deep/.ant-table-tbody > tr.hightCls:hover > td {background: #fff3e1 !important;
}