Ant Design Vue中Table行点击事件

最新推荐文章于 2024-08-22 16:45:00 发布

全栈攻城狮！

最新推荐文章于 2024-08-22 16:45:00 发布

阅读量7.9k

点赞数

分类专栏：前端文章标签： vue ant

本文链接：https://blog.csdn.net/qq549021475/article/details/108753964

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、官网提供的方法

在这里插入图片描述

2、a-table中设置rowSelection属性与customRow点击事件方法（如标题3）

在这里插入图片描述

3、单选与多选的方法

    // Table行点击事件，单选onClickRow()，多选onClickRowMulti()
    onClickRow(record) {
      return {
        on: {
          click: () => {
            let keys = [];
            let rows = [];
            // 无选中或者选中的不是同一条数据则push选中数据
            if(this.selectedRowKeys.length == 0 || (this.selectedRowKeys.length > 0 &&this.selectedRowKeys[0] != record.id)){
              keys.push(record.id);
              rows.push(record);
            }
            this.selectedRowKeys = keys;
            this.selectionRows = rows;
          }
        }
      }
    },
    onClickRowMultiple(record) {
      return {
        on: {
          click: () => {
            let keys = this.selectedRowKeys;
            let rows = this.selectionRows;
            // 若点击选中的行则取消选中该行，否则添加行
            if(keys.length>0 && keys.includes(record.id)){
              keys.splice(keys.indexOf(record.id),1)
              rows.splice(rows.indexOf(record),1)
            }else{
              keys.push(record.id)
              rows.push(record)
            }
            this.selectedRowKeys = keys;
            this.selectionRows = rows;
          }
        }
      }
    },