报错信息:
Property or method "allData" is not defined on the instance but referenced during render
模板:
<template>
<el-tree
:data="allData"
:render-content="render"
>
</el-tree>
</template>
js代码
import _ from 'lodash'
export default {
//防止重名
data(){
return{
allData:[]
}
},
props:{
data:{
type:Array,
default:()=>[]
}
},
//有更新行就重新渲染
watch:{
data(){
this.transformData();
}
},
methods:{
render(h, { node, data, store }){
console.log(data)
return (<div>
{data.name}
<i class="el-icon-folder-opened"></i>
{data.name}
</div>)
},
transformData(){
var that=this;
//需要根据数据进行克隆,克隆后的数据再进行操作
let allData = _.cloneDeep(that.data);
//防止在子组件中操作父组件数据
let treeMapList = allData.reduce((memo,current)=>{
//current.label=current.资源名称;
memo[current["资源ID"]] = current;
return memo;
},{});
let resultdata = allData.reduce((arr,current)=>{
let pid=current.上级资源ID;
let parent = treeMapList[pid];
if(parent){
parent.children? parent.children.push(current):parent.children =[current]
}else if(pid===""){//则是根节点
arr.push(current)
}
return arr;
},[]);
this.allData = resultdata;
},
},
mounted(){
this.transformData();
}
};
参考GPT和自己的思路:
根据报错信息,"allData" 属性或方法未被定义在该实例上,但在渲染期间却被引用。这意味着 "allData" 数据属性没有被正确声明或初始化。
根据你提供的代码,你在data函数中声明了 "allData" 数据属性,并在 "transformData" 函数中对其进行了初始化,但是你也将 "props" 中的 "data" 属性作为初始值赋给了它。所以如果没有向该组件传递 "data" 属性,则会导致 "allData" 初始化失败,从而导致该错误。
因此,请确保将 "data" 属性传递给该组件,并且检查你的 "data" 属性是否确实包含所需的数据。如果仍然存在问题,请检查其他可能导致该错误的代码部分。