VUE 使用 IView 实现Tree进行异步数据加载

VUE 使用 IView 实现Tree进行异步数据加载，在页面初始化时默认加载二级数据，二级之后的数据再进行异步数据加载

布局

<Tree v-show="familyList[0].children.length > 0"  
ref="mytree" 
:data="familyList" 
:load-data="handleLoadData"  
@on-select-change="selChange" 
@on-check-change="ClickCheck" 
show-checkbox 
expand-node>
</Tree> 

数据加载及方法

export default {
  data(){
    return{
      familyList: [
        {
          ID: "0",
          Name: "结构",
          title: "结构",
          loading: false,
          expand: true,
          selected: true,
          children: [],
          disableCheckbox: true
        },
      ],
    }
  },
  mounted(){
    this.loadData(this.familyList[0]);
  },
  methods:{
    loadData(item, callback) {
      var _this = this;
      var _item = item;
      var pid = "";
      if (_item) {
        pid = _item.ID;
      }
      post("/api/GetTree", {
        PID: pid
      }).then((res) => {
        if (res.Code == 0) {
          var list = res.Datas;
          list.forEach(function(obj, indxs) {
            if (obj.ChildCont > 0) {
              obj.loading = false;
            }
          });
          if (callback !== undefined) {
            callback(list);
          }
          if(_this.familyList[0].children.length == 0){
            _this.familyList[0].children =list;
          }
        }
      });
    },
    handleLoadData(item, callback) {
      this.loadData(item, function(data) {
        callback(data);
      });
      this.$forceUpdate();
    },
    selChange(selarray, item) {//当前已选中的节点数组、当前项
     
    },
    ClickCheck(selarray, item) {//当前已选中的节点数组、当前项
     
    }
  }
}
</script>