最初的根节点如果是通过异步方式获取的,无法正常渲染,显示暂无数据,将获取数据的操作放在mounted中,可以正常显示数据,如下:
<template>
<el-select
v-model="defaultVal.id"
:clearable="true"
placeholder="请选择分类"
@clear="clearSelect"
>
<el-option
:label="defaultVal.name"
style="height: auto; padding: 0"
:value="defaultVal.id"
>
<el-tree
ref="tree"
:data="treeData"
lazy
:load="loadNode"
:props="defaultProps"
/>
</el-option>
</el-select>
</template>
<script>
import { getChildList } from '@/api/assetSetting'
export default {
props: {
treeValue: {
type: Object,
default: () => {
return {
name: '',
id: '',
}
},
},
},
data() {
return {
defaultVal: {
name: '',
id: '',
},
treeData: [
{
id: 0,
name: '一级节点',
children: [],
},
],
defaultProps: {
children: 'children',
label: 'name',
},
}
},
watch: {
treeValue: {
immediate: true,
handler(newVal, oldVal) {
this.defaultVal = Object.assign({}, newVal)
},
},
},
// 通过将获取数据的操作放在mounted中可以正常显示数据,不加则显示暂无数据
// async mounted(){
// this.treeData = await getChildList({parentId: 0})
// },
methods: {
clearSelect() {
this.defaultVal.name = ''
this.defaultVal.id = ''
const resetVal = {
name: '一级节点',
id: 0,
}
this.$emit('changeCategory', resetVal)
},
async loadNode(node, resolve,reject) {
// 这样写就获取不到数据
// try {
// if (node.level === 0) {
// const res = await getCategoryTop({type: 'ASSET_INVENTORY',})
// let arr = res.filter((item) => item.parentId === 0)
// resolve(arr)
// } else {
// const res = await getChildList({type: 'ASSET_INVENTORY',parentId: node.data.id,})
// resolve(res)
// }
// } catch (error) {
// reject(error)
// }
try {
if (node.level > 0) {
const res = await getChildList({parentId: node.data.id,})
resolve(res)
}
} catch (error) {
reject(error)
}
},
},
}
</script>
<style lang="scss" scoped></style>
接口获取数据格式:
[
{
"id": 1141,
"name": "办公",
"description": "01",
"parentId": 0,
"parent": null,
},
{
"id": 1142,
"name": "生产",
"description": "02",
"parentId": 0,
"parent": null,
},
{
"id": 1143,
"name": "食堂",
"description": "03",
"parentId": 0,
"parent": null,
},
{
"id": 1144,
"name": "书籍",
"description": "04",
"parentId": 0,
"parent": null,
},
{
"id": 1145,
"name": "车辆",
"description": "05",
"parentId": 0,
"parent": null,
},
{
"id": 1146,
"name": "房屋",
"description": "06",
"parentId": 0,
"parent": null,
},
{
"id": 1147,
"name": "耗材",
"description": "11",
"parentId": 0,
"parent": null,
},
{
"id": 33090,
"name": "ceshi",
"description": "22",
"parentId": 0,
"parent": null,
}
]
