vue antd 表格翻页勾选

最新推荐文章于 2023-10-08 11:08:45 发布

凹凸曼与程序猿

最新推荐文章于 2023-10-08 11:08:45 发布

阅读量1.2k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43994675/article/details/123379093

版权

  <a-table
      :pagination="false"
      rowKey="id"
      :columns="columns"
      size="middle"
      :data-source="tableData"
      :row-selection="{
        columnTitle: ' ',
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
        onSelect: onSelect,
        getCheckboxProps: getCheckboxProps,
      }"
      bordered
    >
    </a-table>
    
    selectedRowKeys：[],
    
       // selectedRows是被选中的数据，置空选择可以将selectedRowKeys置为[]


  onSelectChange(selectedRowKeys) {
      this.selectedRowKeys=selectedRowKeys;
    },
    onSelect(record, selected, selectedRows) {
      console.log(selectedRows, record, selected, 77777);
      if (selected) {
        record.showflag = true;
        this.selectedRows.push(record);
      } else {
        record.showflag = false;
        // 这里是取消勾选，删除对应的数组项
        this.selectedRows.map((x, item) => {
          if (x.id === record.id) {
            this.selectedRows.splice(item, 1);
          }
        });
      }
    
    },
    
    //默认状态
    getCheckboxProps(record) {
      return {
        props: {
          disabled: !record.isFinish, //是否可选
        },
      };
    },