湖州企业网站制作怎么制作自己公司网站
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;
}