怎么在vue中使用UI元素实制作一个树形表格 - 行业资讯 - 肥雀云

　　介绍

本篇文章给大家分享的是有关怎么在vue中使用UI元素实制作一个树形表格,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

一,在组件文件夹下新建如下treeTable文件夹,里面有2个文件:

eval。js:将数据转换成树形数据

/* * 　　*,@Author: jianglei 　　*,@Date:,, 2017 - 10 - 12, 12:06:49 　　*/& # 39;use 严格# 39; 　　import Vue 得到& # 39;vue # 39; 　　export default function treeToArray (expandAll,数据,还以为;parent =, null,, level =, null), { 　　,let tmp =, [] 　　,Array.from(数据).forEach(函数(记录),{ 　　if 才能;(record._expanded ===,未定义),{ 　　,,Vue.set(记录,& # 39;_expanded& # 39;,, expandAll) 　　,,} 　　let 才能;_level =1 　　if 才能;(level !==, undefined ,,, level !==, null), { 　　,,_level =, level + 1 　　,,} 　　Vue.set才能(记录,& # 39;_level& # 39;,, _level)//才能,如果有父元素　　if 才能;(父),{ 　　,,Vue.set(记录,& # 39;父母# 39;,,父母) 　　,,} 　　tmp.push才能(记录) 　　if 才能;(record.children ,,, record.children.length 祝辞,0),{ 　　,,const children =, treeToArray (record.children, expandAll,,记录,_level) 　　,,tmp =, tmp.concat(儿童) 　　,,} 　　,}) 　　return tmp 　　}

索引。vue:树形表格组件

& lt; template> 　　,& lt; el-table :数据=癴ormatData",:行之处;v-bind=癮ttrs"美元;比; 　　& lt;才能el-table-column v=癱olumns.length===0“,宽度=?50“比; 　　,,& lt; template slot-scope=皊cope"比; 　　,,,& lt; span v=皊pace scope.row._level",拷贝:关键=皊pace",类=癿s-tree-space"/比; 　　,,,& lt; span v=癷conShow (0, scope.row)“,类=皌ree-ctrl", @click=皌oggleExpanded(范围。美元指数)“比; 　　,,,,& lt;小姐:v=? scope.row._expanded",类=癳l-icon-plus"/比; 　　,,,,& lt;小姐:v-else 类=癳l-icon-minus"/比; 　　,,,& lt;/span> 　　,,,{{范围。index 美元;}} 　　,,& lt;/template> 　　& lt;才能/el-table-column> 　　& lt;才能el-table-column v=?列,,指数),拷贝columns", v-else :关键=癱olumn.value",:标签=癱olumn.text",:宽度=癱olumn.width"比; 　　,,& lt; template slot-scope=皊cope"比; 　　,,,& lt; !——, Todo ——比; 　　,,,& lt; !——, eslint-disable-next-line vue/no-confusing-v-for-v-if ——比; 　　,,,& lt; span v=皊pace scope.row._level"拷贝,v=癷ndex ===, 0“,:关键=皊pace",类=癿s-tree-space"/比; 　　,,,& lt; span v=癷conShow(指数、scope.row)“,类=皌ree-ctrl", @click=皌oggleExpanded(范围。美元指数)“比; 　　,,,,& lt;小姐:v=? scope.row._expanded",类=癳l-icon-plus"/比; 　　,,,,& lt;小姐:v-else 类=癳l-icon-minus"/比; 　　,,,& lt;/span> 　　,,,{{,scope.row [column.value],}} 　　,,& lt;/template> 　　& lt;才能/el-table-column> 　　& lt;才能槽/比; 　　,& lt;/el-table> 　　& lt;/template> 　　, 　　& lt; script>/* * 　　身份验证:大敌;Lei.j1ang 　　,创建:2018/1/19-13:59 　　*/import treeToArray 得到“。/eval"; 　　export default { 　　,名字:“TreeTable", 　　,道具:{/*,才能eslint-disable */,,数据:{ 　　,,,类型:对象数组,,, 　　,,要求:真实　　,,}, 　　,,列:{ 　　,,,类型:数组, 　　,,默认值:,(),=祝辞,[] 　　,,}, 　　,,evalFunc:函数, 　　,,evalArgs:数组, 　　,,expandAll: { 　　,,,类型:布尔, 　　,,默认值:false 　　,,} 　　}, 　　,计算:{//才能,格式化数据源　　,,formatData:函数(),{ 　　,,let tmp; 　　,,if (! Array.isArray (this.data)), { 　　,,,tmp =, (this.data); 　　,,},{else 　　,,,tmp =, this.data; 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null