玖叶教程网

树形表格懒加载，为大量数据展示提供了便利。

设置数据中的hasChildren属性，即可展示展开标记，点击展开标记，自动加载load方法，填充子数据到当前行，完成展示。

官方示例中，未提供动态刷新子数据的方法。

interface User {
  id: number
  date: string
  name: string
  address: string
  hasChildren?: boolean
  children?: User[]
}

const load = (
  row: User,
  treeNode: unknown,
  resolve: (date: User[]) => void
) => {
  setTimeout(() => {
    resolve([
      {
        id: 11,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        id: 12,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])
  }, 1000)
}

const tableData: User[] = [
  {
    id: 1,
    date: '2016-05-01',
    name: 'wangxiaohu',
    hasChildren: true,
    address: 'No. 189, Grove St, Los Angeles',
  }
]
</script>

但是通过测试发现，子节点存储在表格的store属性的lazyTreeNodeMap下，我们可以通过修改这个属性的值，来动态更新子数据

设置表格ref=“elTable” row-key=”id”

新增调用:

1.设置当前row.value的hasChildren属性为true

2.elTable.value.store.loadOrToggle(row.value)

3.load(row.value, null, null)

row.value.hasChildren = true
elTable.value.store.loadOrToggle(row.value)
load(row.value, null, null)

更新调用：

load(row.value, null, null),此处row.id需为待刷新子数据的父id.

改造load方法：

elTable.value.store.states.lazyTreeNodeMap.value[row.id] = newData

示例如下：

const load = (
		row: rowValue,
		treeNode: unknown,
		resolve: (ruleFlowCode: RuleFlow[]) => void
	) => {
		const param = {
			"pid": row.id
		}
		post("/api/test", param, (data) => {
			if (data.errorCode == 0) {
				if (data.body.records.length > 0) {
					if (typeof resolve === "function") {
						resolve(data.body.records)
					} else {
						var data = elTable.value.store.states.lazyTreeNodeMap.value[row.id]
						if (data != undefined) {
							newData = []
							for (var index in data.body.records) {
								newData.push(data.body.records[index])
							}
							elTable.value.store.states.lazyTreeNodeMap.value[row.id] = newData
						}
					}
				}
			}
		});
	}