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

• treeTable页面

html部分：

<template>
  <el-table :data="formatData1" :row-style="showRow1" v-bind="$attrs" style="width: 100%;" :height="height">
  	<el-table-column v-if="selection" type="selection"></el-table-column>
		<el-table-column v-if="radio" width="45">
				<template slot-scope="scope">
					<el-radio :label="scope.row.id"  v-model="tally_info"></el-radio>
				</template>
		</el-table-column>
 
    <el-table-column v-if="columns.length===0" >
      <template slot-scope="scope">
        <span v-for="space in scope.row._level" class="ms-tree-space" :key="space+'dic'"></span>
        <span class="tree-ctrl" v-if="iconShow(0,scope.row)" @click="toggleCurrentExpanded(scope.$index)">
          <i v-if="!scope.row._expanded" class="el-icon-plus"></i>
          <i v-else class="el-icon-minus"></i>
        </span>
        {{scope.$index}}
      </template>
    </el-table-column>
    <el-table-column v-else v-for="(column, index) in columns" :key="column.value+'dic'" :label="column.text">
      <template slot-scope="scope">
        <span v-if="index === 0" v-for="space in scope.row._level" class="ms-tree-space" :key="space+'dic'"></span>
        <span class="tree-ctrl" v-if="iconShow(index,scope.row)" @click="toggleCurrentExpanded(scope.$index,scope.row)">
          <i v-if="!scope.row._expanded" class="el-icon-plus"></i>
          <i v-else class="el-icon-minus"></i>
        </span> 	
        {{  currentColumn(scope.row, column.value)  }}
      </template>
    </el-table-column>
    <slot><div></div></slot>
  </el-table>
</template>

 css部分 

<style scoped>
  
  .ms-tree-space {
    position: relative;
    top: 1px;
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    width: 18px;
    height: 14px;
    &::before {
      content: ""
    }
  }
  .processContainer{
    width: 100%;
    height: 100%;
  }
  table td {
    line-height: 26px;
  }

  .tree-ctrl{
    position: relative;
    cursor: pointer;
    color: #2196F3;
    margin-left: -18px;
  }
</style>

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<newArr.length;j++){ //区域类型转换
									let str=newArr[j].type;							
									arr.forEach((e)=>{
									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表格树结构，异步加载，不断追加子级。