Vue+element中Tree树形控件数据失效~

1.完成效果

2.要求

后台大哥说，数据量太大，没办法一次性把全部的数据给我，先给我第一级的数据，子项则在点击的时候进行请求；

3.开写~~~~~~

初始数据（对象数组）：

组件调用：

复制代码

数据配置：

  data() {
      return {
         chulilist:[],
          defaultProps: {
            children: 'list',
            label: 'categoryname'
          },
          mylist:[],
     }
    },
复制代码

数据处理：

methods: {

         renderContent(h, { node, data, store }) {
            return (
              "flex: 1; display: flex; align-items: center; justify-content: space-between; 
                       font-size: 14px; padding-right: 8px;">
                  "width:30%" on-click={ () => this.dian(data,node,store)}>
                       "el-icon-circle-plus"  v-show={node.level!="3"} >{node.label}
                  
                  "width:30%" >减价率：{data.rate}
                  "width:30%" >"font-size: 12px;" type="text" 
                     on-click={ () => this.editrate(data)} >修改减价率
                  
             );
      },
复制代码

请求回来的子项数据,用.list添加属性的方法，放到组件渲染的数据中；

   vue.chuliNum(vue.chulilist,vue.parentcateid,data.data.list);
      //     递归遍历的方法处理数据
      chuliNum:function(a,aid,dataa) {
        for(let i=0;iif(a[i].levelid==aid){
            a[i].list=[];
            a[i].list=dataa;
          }else{
            if(a[i].list!=undefined){
              this.chuliNum(a[i].list,aid,dataa);
            }
          }
        }
      },

复制代码

期望结果：

仔细查看数据：发现通过.list方法设置的属性，没有get/set，因此组件无法得到渲染；

涉及到vue的深入式响应原因,以下是我的数据处理方法：

     for(let i=0;i$set(vue.chulilist[i],'list',vue.chulilist[i].list);
             if(vue.chulilist[i].list){
                    for(let y=0;y$set((vue.chulilist[i].list)[y],'list',(vue.chulilist[i].list)[y].list)
                     }
             }
    }
复制代码

不做深层解释，了解更多----OPen网站 cn.vuejs.org/v2/guide/re…