el-table表格树子节点不刷新问题

el-table表格树操作子节点不刷新**

---

前言

实际数据已经更新，但是页面显示不刷新。

---

一、html

说明：我这里就没有写里面的内容了

 <el-table 
   :data="list"
    row-key="id"
    lazy
    :load="handleTreeLoad"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
</el-table>

二、数据处理

1.子组件

（1）父组件传过来的值

const props = defineProps<{
  list: UserGroup[];   //数据列表
  page: PageParams;  //f分页
  pid: string;  //操作时的父Id
  isDel: number;  //是否是操作删除
}>();

（2）定义一个map存储数据

let maps = ref(new Map());

（3）树的数据方法
解析：load为加载子节点的函数，当lazy为true时生效

        row： 毋庸置疑，当前行，也就是父节点的行数据
		treeNode: 树结构的节点属性
		resolve: 是一个函数，用来加载子节点数据

代码如下：

function handleTreeLoad(
  row?: UserGroupTree,
  treeNode?: unknown,
  resolve?: (date: UserGroupTree[]) => void
) {
  // load 函数中的将当前行信息保存
  if (row.id) {
    data.resData = [];
    maps.value.set(row.id, { row, treeNode, resolve });
    getUserGroupPageApi({ current: 1, size: 200, pid: row.id }).then(res => {
      if (res.code === 0) {
        data.resData = res.data.records;
        data.resData.forEach(el => {
          el.hasChildren = true;
        });
        console.error(data.resData);
        resolve(data.resData);
      }
    });
  }
}

（3）监听pid的改变
//适当的时候取出来，将treeNode的loading设置为true即可，然后重新调用load属性定义的函数

watch(pid, newVal => {
  let rtr = maps.value.get(newVal);
  props.list.forEach(el => {
    if (el.id === newVal && rtr) {
      rtr.treeNode.loading = false;
      // 如果是一条得单独处理且是删除时
      if (data.resData.length <= 1 && props.isDel === 1) {
        data.resData.shift();
        handleTreeLoad(rtr.row, rtr.treeNode, rtr.resolve);
      } else {
        handleTreeLoad(rtr.row, rtr.treeNode, rtr.resolve);
      }
    }
  });
});

2.父组件

代码如下（示例）：
（1）删除代码

const pid = ref("");
const isDel = ref(0); //删除

function handleDelete(params: UserGroupForm) {
  pid.value = "";
  isDel.value = 0;
  ElMessageBox.confirm("此操作将永远删除数据，是否继续？", "提示").then(() => {
    delUserGroupApi({ id: params.id }).then(res => {
      if (res.code === 0) {
        pid.value = params.pid;
        isDel.value = 1;
        successMessage(res.msg);
        fetchList(data.page);
      } else {
        errorMessage(res.msg);
      }
    });
  });
}

（2）查询列表

function fetchList(params: PageParams): void {
  data.query.pid = "-1";
  getUserGroupPageApi(Object.assign(data.query, params)).then(res => {
    if (res.code === 0) {
      data.list = res.data.records;
      data.list.forEach(el => {
        el.hasChildren = true;
      });
      data.total = res.data.total;
    } else {
      errorMessage(res.msg);
    }
  });
}

该处使用的url网络请求的数据。

总结

这里比较关键的就是loading这个属性，这个属性决定了会不会重新加载子节点。
知道这个就好办了，我们只需要在适当的时候将loading的值改为true不就可以了?

这个时候又有一个新的问题出现了，那就是load定义的函数只有在第一次打开
子节点的时候才会触发，其他时候不会触发，那么这个时候就需要我们手动操作了。
我这里在其他的博客中吸取了一下经验，在进入子节点的时候将row,treeNode,resolve保存起来，
在需要的时候手动调用load定义的函数即可。
保存的方式很多，因为不需要持久化，那么我直接选用map