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;
}