Vue+element中Tree樹形控制元件資料失效~

汪小蓉發表於2018-05-21
Vue控制元件

1.完成效果

Vue+element中Tree樹形控制元件資料失效~

2.要求

後臺大哥說，資料量太大，沒辦法一次性把全部的資料給我，先給我第一級的資料，子項則在點選的時候進行請求；

3.開寫~~~~~~

初始資料（物件陣列）：

Vue+element中Tree樹形控制元件資料失效~

元件呼叫：

<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>);
      },
複製程式碼

Vue+element中Tree樹形控制元件資料失效~

請求回來的子項資料,用.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);
            }
          }
        }
      },

複製程式碼

期望結果：

Vue+element中Tree樹形控制元件資料失效~

仔細檢視資料：發現通過.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…

相關文章