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

　　介绍

这篇文章将为大家详细讲解有关怎么在vue中使用UI元素实现一个树形表格,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

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

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

“use strict"; 　　import Vue 得到“vue"; 　　export default function treeToArray ( 　　,数据, 　　expandAll,=,parent 空, 　　,level =零　　),{ 　　,let tmp =, []; 　　,Array.from(数据).forEach(函数(记录),{ 　　,if (record._expanded ===,未定义),{ 　　Vue.set才能(记录,,“_expanded",, expandAll); 　　,} 　　,let _level =, 1; 　　,if (level !==, undefined ,,, level !==, null), { 　　时间=_level 才能;level +, 1; 　　,} 　　,Vue.set(记录,,“_level",, _level); 　　,//如果有父元素　　,if (父),{ 　　Vue.set才能(记录,,“parent",,父母); 　　,} 　　,tmp.push(记录); 　　,if (record.child ,,, record.child.length 祝辞,0),{ 　　const 才能;child =, treeToArray (record.child, expandAll,,记录,_level); 　　时间=tmp 才能;tmp.concat(孩子); 　　,} 　　,}); 　　,return tmp; 　　}

索引。vue:树形表格组件

& lt; template> 　　,& lt; el-table ref=癿ultipleTable",: data=癴ormatData",:行之处;v-bind=癮ttrs"美元;祝辞,& lt; !——, @header-click=癱hooseall",——比; 　　,& lt; el-table-column : render-header=皉enderHeader",宽度=?0”,对齐=癱enter"比; 　　& lt;才能template slot-scope=皊cope"比; 　　& lt;才能el-checkbox v模型=皊cope.row.checks", @change=肮?scope.row)“祝辞& lt;/el-checkbox> 　　& lt;才能/template> 　　,& lt;/el-table-column> 　　,& 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", 　　,数据(){ 　　,return { 　　chooseson才能:真的,,//全选　　关键:才能,true //单个点击直到全部选中　　,}; 　　}, 　　,道具:{ 　　,/* eslint-disable */,数据:{ 　　,,类型:对象数组,,, 　　要求:才能成立　　}, 　　,列:{ 　　类型:才能,数组, 　　默认值:才能,(),=祝辞,[] 　　}, 　　,evalFunc:函数, 　　,evalArgs:数组, 　　,expandAll: { 　　类型:才能,布尔, 　　,,默认值:false 　　,} 　　}, 　　,计算:{ 　　,//格式化数据源　　,formatData:函数(),{ 　　let 才能,tmp; 　　if 才能;(! Array.isArray (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 　　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