1.完成效果

2.要求

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

3.开写~~~~~~

初始数据（对象数组）：

组件调用：

<template>
   <el-tree :data="chulilist"  :props="defaultProps"  :render-content="renderContent" node-key="levelid"
                   :accordion="true" :default-expanded-keys="mylist"></el-tree>
</template>
复制代码

数据配置：

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

数据处理：

methods: {
<!--这里需要在项目中引入jsx语法-->
         renderContent(h, { node, data, store }) {
            return (
              <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; 
                       font-size: 14px; padding-right: 8px;">
                  <span style="width:30%" on-click={ () => this.dian(data,node,store)}>
                       <i class="el-icon-circle-plus"  v-show={node.level!="3"} ></i>{node.label}
                  </span>
                  <span style="width:30%" >减价率：{data.rate}</span>
                  <span style="width:30%" ><el-button style="font-size: 12px;" type="text" 
                     on-click={ () => this.editrate(data)} >修改减价率</el-button>
                  </span>
             </span>);
      },
复制代码

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

   vue.chuliNum(vue.chulilist,vue.parentcateid,data.data.list);
      //     递归遍历的方法处理数据
      chuliNum:function(a,aid,dataa) {
        for(let i=0;i<a.length;i++){
          if(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<vue.chulilist.length;i++){
         vue.$set(vue.chulilist[i],'list',vue.chulilist[i].list);
             if(vue.chulilist[i].list){
                    for(let y=0;y<vue.chulilist[i].list.length;y++){
                        vue.$set((vue.chulilist[i].list)[y],'list',(vue.chulilist[i].list)[y].list)
                     }
             }
    }
复制代码

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