Vue3 el-table 懒加载多选与展开(删除、新增),表格不刷新问题

 所有实现代码如下:

<el-table
        :key="itemKey"
        border
        :data="demo2.tableData"
        ref="tableRef"
        highlight-current-row
        size="small"
        row-key="ID"
        width="100%"
        height="100%"
        lazy
        :load="load"
        @selection-change="handleSelectionChange"
        default-expand-all
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        :tree-props="{ children: 'Children', hasChildren: 'Haschilds' }"
      >
        <el-table-column
          type="selection"
          width="55"
          :reserve-selection="true"
        />
        <el-table-column prop="OrgName" label="组织结构名称" tree-node />
</el-table>
//选择
const multipleSelection = ref([]);
const handleSelectionChange = val => {
  multipleSelection.value = val;
};

const maps = new Map();//存所有子节点
const itemKey = ref(1);//刷新用
//懒加载方法
const load = (row, treeNode, resolve) => {
  setTimeout(() => {
    var parms = { parentid: row.ID };
    GetOrganize(parms)
      .then(childs => {
        maps.set(row.ID, { row, treeNode, resolve });
        resolve(childs);
      })
      .catch(msg => {
       
      });
  }, 500);
};

//重新加载
const toggaletree = item => {
  demo2.loading = false;
  //懒加载重新渲染
  demo2.tableData = [];
  var parms = { parentid: 0 };
  GetOrganize(parms).then(data => {
    demo2.tableData = data;
    if (item != 0) {
      item.Haschilds = true;
      var mapdata = maps.get(item.ID);
      if (mapdata && mapdata != undefined) {
        const { row, treeNode, resolve } = mapdata;
        load(row, treeNode, resolve);
      }
    }
  });
};

//删除
const onDelete = async () => {
  const SelectionList = multipleSelection.value;
  if (SelectionList.length > 0) {
    ElMessageBox.confirm("您确定删除选中数据吗?", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        DeleteOrganizelist(SelectionList.map(t => t.ID))
          .then(data => {
            successMessage("删除成功");
            var i = 0;
            SelectionList.forEach((item, index) => {
              tableRef.value.store.clearSelection();
              var mapdata = maps.get(item.parentId);
              if (mapdata && mapdata != undefined) {
                const { row } = mapdata;
                tableRef.value.store.states.lazyTreeNodeMap.value[
                  item.parentId
                ] = [];
                toggaletree(row);
                i = 1;
              }
            });
            if (i == 0) {
              toggaletree(0);
            }
          })
          .catch(msg => {
            errorMessage(msg);
          });
      })
      .catch(() => {});
  } else {
    errorMessage("请最少选择一行");
  }
};

 花了一个早上的时间才解决的,很适用!

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值