vue+elementui 搭建 treeTable实现异步加载，追加子级

• treeTable页面

html部分：

 css部分 

js部分 

import treeToArray from './eval'
import { bus } from "../bus";
import $ from "jquery";
export default {
  name: 'treeTable',
  props: {
    data: {
      type: [Array, Object],
      required: true
    },
    urlLazy:{
    	type:String
    },
    columns: {
      type: Array,
      default: () => []
    },
    evalFunc: Function,
    evalArgs: Array,
    expandAll: {
      type: Boolean,
      default: false
    },
    selection: false ,
    radio : false,
    height:{
    	type:Number
    },
    nodeDataCurrentId:{
    	type:String
    },
    optionArea:{
    	type: Array
    }
  },
  computed: {
    formatData1: function() {//计算属性转换父组件转换data数据
      let tmp
      if (!Array.isArray(this.data)) {
        tmp = [this.data]
      } else {
        tmp = this.data
      }
      const func = this.evalFunc || treeToArray
      const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
      return func.apply(null, args)
    }
  },
  methods: {
    showRow1: function(row) {
      const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true)
      row.row._show = show
      return show ? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;' : 'display:none;'
    },
    // 切换下级是否展开
    toggleCurrentExpanded: function(trIndex,row) {

//			console.log(this.urlLazy)
			console.log(row);
			let params="";
			
			if(this.urlLazy=='a/investment/projectBill/splitData'){
					params = {
				"parent.id":row.id,
				"section.id":this.nodeDataCurrentId
			};
			}
			else {
				params = {
				parentId:row.id
			};
			}
			if(this.urlLazy=='a/investment/wbs/splitWbsData'){
					params = {
				"parentId":row.id,
				"section.id":this.nodeDataCurrentId
			};
			}
			bus.$emit("getAjax", this.urlLazy, params, rs => { //获取列表数据
//				 = rs.body;
			console.log(rs);
				let newArr=[];
				
				if(this.urlLazy=='a/sys/dict/split/data'||this.urlLazy=='a/investment/projectBill/splitData'||this.urlLazy=='a/investment/wbs/splitWbsData'){
							
						if(rs.body.rows.length>0){
								this.$set(row,'children',rs.body.rows)
						}
					else {
							return;
						}
				}
				else {
					if(rs.body.length>0){
								if(this.urlLazy=="a/sys/area/getChildren"){
								let arr=this.optionArea;
								let newArr=rs.body;							
								for(var j=0;j{
									for (var k in e){
//												debugger
											if (e[k]==str) {
												newArr[j].type=e.label;
											}
									}
								})
								}
								rs.body=newArr;
								}
								this.$set(row,'children',rs.body)
						}
					else {
							return;
						}
				}
				
				console.log(row);
			});

      const record = this.formatData1[trIndex]
      record._expanded = !record._expanded
    },
    // 图标显示
    iconShow(index, record) {
      return (index === 0)
    },
    currentColumn(row, prpo){//格式化数据

				var array = prpo.split(".");    	
    		if(array.length == 1){
    			return row[prpo];
    		}
    		var result = row;
    		for(var i = 0; i < array.length; i++){
    			result = result[array[i]];
    			if(!result){
    				return "";
    			}
    		}
    		return result;
    }
    
  },
 created(){
 
  },
  data(){
  	return {
	    tally_info : ""
  	}

  }
  
   
}

treeToArray方法

import Vue from 'vue'
export default function treeToArray(data, expandAll, parent = null, level = null) {
  let tmp = []
  Array.from(data).forEach(function(record) {
    if (record._expanded === undefined) {
      Vue.set(record, '_expanded', expandAll)//设置默认所有树结构为收拢状态
    }
    let _level = 1
    if (level !== undefined && level !== null) {//节点级数
      _level = level + 1
    }
    Vue.set(record, '_level', _level)
    // 如果有父元素
    if (parent) {
      Vue.set(record, 'parent', parent)//追加修改父级节点数据
    }
    tmp.push(record)
    if (record.children && record.children.length > 0) {//如果当前节点有子级节点就不断追加数据
      const children = treeToArray(record.children, expandAll, record, _level)
      tmp = tmp.concat(children)
    }
  })
  return tmp
}

 实现table表格树结构，异步加载，不断追加子级。