表格行选中

刀刀

12/31/2024

0 字

0 分钟

ant design vue 组件库中有一个表格组件 a-table ，可实现单选表格或多选表格的效果，但是只有点击单选框或多选框才有效。用户想要点击当前行也能选中该行的数据。

思路

首先第一步，先去看官方文档有没有实现该需求的 api 。官网文档指路：Table 表格。

官方文档有这么一段 customRow 用法，示例方法为：

jsx

<Table
  customRow={(record) => {
    return {
      props: {
        xxx... //属性
      },
      on: { // 事件
        click: (event) => {},       // 点击行
        dblclick: (event) => {},
        contextmenu: (event) => {},
        mouseenter: (event) => {},  // 鼠标移入行
        mouseleave: (event) => {}
      },

    };
  )}
  customHeaderRow={(column) => {
    return {
      on: {
        click: () => {},        // 点击表头行
      }
    };
  )}
/>

可以看到，在 on 对象内绑定了 click 事件可以获取到当前行点击的事件，触发点击事件后，如果当前行未选中，就把当前行的 id 追加到表格行选中的数组内，反之把当前行的 id 从数组中去除。

代码

jsx

<a-table
  size="small"
  :scroll="{ x: true, y: 500 }"
  bordered
  rowKey="id"
  :columns="columns"
  :dataSource="dataSource"
  :pagination="false"
  :customRow="setRow"
/>

setRow(record, index){
    return {
      on: {
        click: ()=>{
          // 如果当前行已被选中，去除
          if(this.keys.includes(record.id)) {
            this.keys = this.keys.filter(item => item !== record.id)
            this.rows = this.rows.filter(item => item.id !== record.id)

          } else {
            // 当前行没被选中，判断他是单选表格还是多选表格
            if(this.rightType === 'checkbox') {
            } else {
              // 单选表格就把原数组清空，多选表格什么操作都不用做
              this.keys = []
              this.rows = []
            }
            // 把数据push进表格内
            this.keys.push(record.id)
            this.rows.push(record)
          }
          
          // selectedRowKeys为表格已选中的id数组，selectedRows为表格已选中的数据对象，赋值给他们
          this.selectedRowKeys = this.keys
          this.selectedRows = this.rows
        }
      }
    }
},

表格行选中 ​

思路 ​

代码 ​

表格行选中

思路

代码