vue在创建render-content后报错

报错信息:
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>

阅读 4.3k
1 个回答

1.如果你想用data()中的数据
render(h, { node, data, store }) 中的data改成Alldata
2.如果你想用props中的数据
render(h, { node, data, store }) 中的data改成this.data

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题