需求描述

一个树形表格的增删查改

技术细节

刚开始想的很好，新增/编辑/删除时不调用接口，而是直接更改数据，如删除时，直接删除对应下标的数据
遇到的问题

1. 实际业务中是否有子级，是不确定的-这个好解决，判断一下就行
2. 通过load接口获取到的子项，使用proxy.$refs.table.store.states.lazyTreeNodeMap.value获取不到节点
3. 通过proxy.$refs.table.store.states.treeData.value可以获取到节点数据，但是不能触发更新
4. 最后使用了最简单的方式，新增，删除，编辑完成后，直接使用proxy.$refs.table.store.loadOrToggle(row)重新触发load调接口

<template><div><el-table :data="tableData1" style="width: 100%" row-key="id" border lazy :load="load":tree-props="{ children: 'children', hasChildren: 'hasChildren' }" ref="table"><el-table-column prop="date" label="Date" /><el-table-column prop="name" label="Name" /><el-table-column prop="address" label="Address" /><el-table-column prop="address" label="Address" width="270"><template #default="scope"><el-button type="primary" size="small" @click="handleAdd(scope.row)">add</el-button><el-button type="primary" size="small" @click="handleAdd2(scope.row)">add2</el-button><el-button size="small" @click="handleEdit(scope.row)">Edit</el-button><el-button size="small" type="danger" @click="handleDelete(scope.row)">Delete</el-button></template></el-table-column></el-table></div>
</template>
<script setup>
import {onMounted,ref,getCurrentInstance} from 'vue';
const {proxy} = getCurrentInstance();const handleEdit = ((row) => {console.log(row)
})
const handleDelete = ((row) => {console.log(row)
})
const handleAdd = ((row) => {
console.log(proxy.$refs.table.store.states.treeData.value)
console.log(proxy.$refs.table.store.states.lazyTreeNodeMap.value)// proxy.$refs.table.store.states.treeData.value[row.id].loaded = false;proxy.$refs.table.store.states.treeData.value[row.id].loaded = falseproxy.$refs.table.store.loadOrToggle(row)
})
const handleAdd2 = ((row) => {})
const load = (row,treeNode,resolve
) => {console.log(row)setTimeout(() => {resolve([{id: `${row.id}_31`,date: '2016-05-01',name: 'wangxiaohu',address: 'No. 189, Grove St, Los Angeles',hasChildren: true,},{id: `${row.id}_32`,date: '2016-05-01',name: 'wangxiaohu',address: 'No. 189, Grove St, Los Angeles',hasChildren: true,},])}, 1000)
}const tableData1 = [{id: 11,date: '2016-05-02',name: 'wangxiaohu',address: 'No. 189, Grove St, Los Angeles',hasChildren: true,},{id: 2,date: '2016-05-04',name: 'wangxiaohu',hasChildren: true,address: 'No. 189, Grove St, Los Angeles',},{id: 3,date: '2016-05-01',name: 'wangxiaohu',hasChildren: true,address: 'No. 189, Grove St, Los Angeles',},{id: 4,date: '2016-05-03',name: 'wangxiaohu',hasChildren: true,address: 'No. 189, Grove St, Los Angeles',},
]
</script>

小结

关键点在于：proxy.$refs.table.store.loadOrToggle(row)