鱼塘码农

菜鸟学习记录
鱼海无涯

Ant Design Vue table表格点击事件- 行点击选中和选择框点击选中的写法

Ant Design Vue table 提供了行前选择框的选中方式,没有直接提提供行点击选中,经过一帆思(sou)考(suo),摸(cha)索(xun)出了方法。
<a-table>标签内:

:rowSelection="{                   //列表项是否可选择
  selectedRowKeys: selectedRowKeys, //指定选中的数组(存放点击的key)
  onChange: onSelectChange,  // 指定选择框选择事件
  type: 'radio',            //单选  默认多选
  columnWidth: 20,         //选择框占用的列宽
}"
:rowKey="record => record.id"  // 重要!,指定Key后selectedRowKeys会返回Key,否则返回行号
:customRow="Rowclick"   //行点击事件

data()内定义好选中的数组

selectedRowKeys: [], // 用来存放点击的key

框点击选择事件:

onSelectChange(selectedRowKeys) {  //接收数组,存放到前面定义的数组中
  this.selectedRowKeys = selectedRowKeys;
},

行点击单选事件(单选时rowSelection的type: 'radio'不写):

Rowclick(record) {
  return {
    on: {
      click: () => {
        let keys = [];
        keys.push(record.id);
        console.log('record.id', record.id);
        this.selectedRowKeys = keys;
      },
    },
  };
},

行点击多选

Rowclick(record) {
  return {
    on: {
      click: () => {
        let index = this.selectedRowKeys.indexOf(record.id); //判断有没有当前点击的ID,没有返回-1 有返回下标
        if (index === -1) {
          this.selectedRowKeys.push(record.id); //添加
        } else {
          this.selectedRowKeys.splice(index, 1); // 删除
        }
      },
    },
  };
},

重置选中:

//页面
<a-button
  type="primary"
  :disabled="!hasSelected" //当前没有选择数据时,禁用按钮
  @click="start"
  style="margin-left: 8px"
>
  重选
</a-button>
//JS
start() {
  this.selectedRowKeys = [];
},

是否有选择数据:

computed: {
  hasSelected() {
    return this.selectedRowKeys.length > 0;
  },
},
文章内容可能来自网络,纯为学习使用,若有侵权,请联系我删除 | 当前页面:鱼塘码农 » Ant Design Vue table表格点击事件- 行点击选中和选择框点击选中的写法

评论