报错信息:
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代码
<script>
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();
}
};
</script>
1.如果你想用data()中的数据
把
render(h, { node, data, store })
中的data改成Alldata2.如果你想用props中的数据
把
render(h, { node, data, store })
中的data改成this.data