ant table vue3 表格设置默认,跨页勾选,翻页选择记忆勾选,数据回显勾选

因为项目需求是通过接口返回数据  然后表格默认回显,并且切换页数的时候保留当前选择项

1.首先使用rowSelection 需要指定row-key绑定的值必须唯一

<a-table
        :columns="state.columns1"
        :data-source="state.dataSource1"
        :pagination="state.pagination1"
        @change="pageChange"
        bordered
        :row-selection="rowSelection1"
        :rowKey="(record) => record.id"
        size="small"
        style="margin-top: 20px"
      >

2.引用rowSelection函数

const selectedRowsList2 = ref([]);
const selectedRowsKey = ref([]);//此处逻辑为切换页数后替换selectedRowsList2 
const rowSelection2 = {
  selectedRowKeys: selectedRowsList2,
  onSelect(record, selected, selectedRowsData, nativeEvent) {
    // 选择
    if (selected) {
      selectedRowsList2.value.push(record.id);
      selectedRowsKey.value.push(record);
    } else {
      // 取消选中
      selectedRowsList2.value = selectedRowsList2.value.filter(
        (v) => v !== record.id
      );
      selectedRowsKey.value.splice(
        selectedRowsKey.value.findIndex((x) => x.id === record.id),
        1
      );
      console.log(toRaw(selectedRowsKey.value));
    }
    getArray(selectedRowsKey.value);
  },
  /**
   * selected=true 全选
   * selected = false 取消全选
   * selectedRows 全选的行数据(包括默认选中的)
   * changeRows 前后改变的数据
   */
  onSelectAll(selected, selectedRows, changeRows) {
    // 全选
    if (selected) {
      changeRows.map((x) => {
        selectedRowsList2.value.push(x.id); //选中id
      });
      selectedRowsKey.value = selectedRowsKey.value.concat(changeRows);
    } else {
      // 取消全选
      changeRows.forEach((item) => {
        // 去掉选择取消的keyID
        selectedRowsList2.value = selectedRowsList2.value.filter(
          (v) => v !== item.id
        );
      });
      selectedRowsKey.value = selectedRowsKey.value.filter(
        (x) => !changeRows.find((i) => i.id === x.id)
      );
    }
    getArray(selectedRowsKey.value);
  },
  getCheckboxProps: (recode) => {
    if (selectedRowsList2.value.includes(recode.id)) {
      // 如果数组中无则添加
      let index = selectedRowsKey.value.findIndex((v) => v.id == recode.id);
      if (index < 0) {
        selectedRowsKey.value.push(recode);
      }
    }
    return {
      props: {
        defaultChecked: selectedRowsList2.value.includes(recode.id),
      },
    };
  },
};
const getArray = (selectData) => {
  console.log(selectData, 888);

  let map = new Map();
  for (let item of selectData) {
    if (!map.has(item.id)) {
      map.set(item.id, item);
    }
  }
  selectedRowsKey.value = [...map.values()];
};

3.从接口处获取筛选默认数据

//removeDuplicate为去重函数 自己百度或者用上方的getArray也可以
if (selectedRowsKey.value.length != selectedRowsList2.value.length) {
    selectedRowsList2.value = removeDuplicate(
      selectedRowsKey.value?.map((item) => item.id)
    );
  } else {
    data?.forEach((item) => {
      if (item.isChecked == 1) {
        // arrList.value.push(item);
        selectedRowsList2.value.push(item.id);
      }
    });
  }

都是根据cv网上的大神然后经过自己改良(因为拔文档很多都不能满足要求)

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值