Loongphy
commented
9 months ago loadMore 中的 nodeData 参数不是 Tree 组件定义的 TreeNodeData 类型，而是你传入的 userTree 类型。
如下：
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref({})
interface Node {
label: string
id: string
children?: Node[]
isLeaf?: boolean
}
const treeData = ref<Node[]>([
{
label: 'Trunk 0-0',
id: '0-0',
},
{
label: 'Trunk 0-1',
id: '0-1',
children: [
{
label: 'Branch 0-1-1',
id: '0-1-1',
},
],
},
])
function loadMore(nodeData: Node) {
value.value = nodeData
console.log(nodeData) // {label: 'Branch 0-1-1', id: '0-1-1'}
return new Promise((resolve) => {
setTimeout(() => {
nodeData.children = [
{ label: `leaf`, id: `${nodeData.id}-1`, isLeaf: true },
]
resolve(nodeData)
}, 1000)
})
}
</script>
<template>
<a-tree :data="treeData" :field-names="{ title: 'label', key: 'id' }" :load-more="loadMore" />
<span>{{ value }}</span>
</template>
Basic Info
Steps to reproduce
// 使用了field-names 指定数据字段名
<a-tree :data="userTree" :field-names="{ key: 'id' }" :load-more="loadMore" />// 在loadMore等方法中样式无法匹配 const loadMore = (nodeData: TreeNodeData): Promise => {
console.log(nodeData.id)
...
}
报错：类型“TreeNodeData”上不存在属性“id”。