1、bug重现,选中删除一条数据,删除成功,重新请求刷新表格,且清空选中项(表格已封装过,所以不是a-table)
<table-box
   v-if="isShow"
   :columns="state.columns"
   :dataSource="state.tableData"
   :pagination="pagination"
   :rowSelection="rowSelection"
   :routerName="routerName"
   @change="handleTableChange"
   :loading="loading"
 >
</table-box>
const state = reactive({
  selectedRowKeys: []
});
const getTableData = async (formData) => {
  loading.value = true;
  let res = await request(url.GET_DEVICE_FIRM_LIST, "get", formData)
    .finally(() => {
      loading.value = false;
    })
  loading.value = false;
  state.selectedRowKeys = [];
  pagination.current = res.pages;
  pagination.total = res.total;
  state.tableData = res.rows;
};
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    state.selectedRowKeys = selectedRowKeys;
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
};
const handleDelMore = () => {
  if (state.selectedRowKeys.length) {
    handleDel(state.selectedRowKeys);
  }
};
const handleDel = (id) => {
  let type = id instanceof Array;
  let length = 0;
  let ids = "";
  let delUrl = url.DELETE_DEVICE_FIRM + id;
  if (type) {
    length = id.length;
    ids = id.join(",");
    delUrl = url.DELETE_DEVICE_FIRM + ids;
  }
  Modal.confirm({
    title: type
      ? `您确定要删除${length}个设备厂商吗?`
      : "您确定要删除该设备厂商吗?",
    content: "删除后不可恢复哦",
    class: "del-modal",
    icon: createVNode(ExclamationCircleOutlined),
    okText: "确定",
    okType: "primary",
    cancelText: "取消",
    onOk: () => {
      request(delUrl, "delete")
        .then(() => {
          message.success("删除成功!");
          getTableData(formData);
        })
    },
    onCancel() {
      
    },
  });
};
2、删除成功且表格重新刷新成功,但是重新选中项的时候却含有上次删除的项在里边,以下图片时操作删除后然后刷新表格,再次选中打印出的数据,返回的数据id为10的数据都不存在,却还保留在了选中项中

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3、修改另一种写法,随意在哪儿清空都行,删除成功或者刷新表格后,再次选中后,拿到的项都是正确的
<table-box
  v-if="isShow"
  :columns="state.columns"
  :dataSource="state.tableData"
  :pagination="pagination"
  :rowSelection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
  :routerName="routerName"
  @change="handleTableChange"
  :loading="loading"
>
</table-box>
const onSelectChange = (sel) => {
  state.selectedRowKeys = sel;
};
const getTableData = async (formData) => {
  loading.value = true;
  let res = await request(url.GET_DEVICE_FIRM_LIST, "get", formData)
    .finally(() => {
      loading.value = false;
    })
  loading.value = false;
  state.selectedRowKeys = [];
  pagination.current = res.pages;
  pagination.total = res.total;
  state.tableData = res.rows;
};
const handleDelMore = () => {
  if (state.selectedRowKeys.length) {
    handleDel(state.selectedRowKeys);
  }
};
const handleDel = (id) => {
  let type = id instanceof Array;
  let length = 0;
  let ids = "";
  let delUrl = url.DELETE_DEVICE_FIRM + id;
  if (type) {
    length = id.length;
    ids = id.join(",");
    delUrl = url.DELETE_DEVICE_FIRM + ids;
  }
  Modal.confirm({
    title: type
      ? `您确定要删除${length}个设备厂商吗?`
      : "您确定要删除该设备厂商吗?",
    content: "删除后不可恢复哦",
    class: "del-modal",
    icon: createVNode(ExclamationCircleOutlined),
    okText: "确定",
    okType: "primary",
    cancelText: "取消",
    onOk: () => {
      request(delUrl, "delete")
        .then(() => {
          message.success("删除成功!");
          getTableData(formData);
        })
    },
    onCancel() {
      
    },
  });
};

你不肯清醒,看再多少文案都没用.

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐