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

淩亂°似流年 2022-05-08 08:44 410阅读 0赞

>  *  **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表格树结构，异步加载，不断追加子级。**