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

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

效果图

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