前沿

最近在项目开发中需要做一个多级表格，树形表格的功能，看看元素用户界面上没有，自己开是折腾，话不多说，上思路和代码。

效果图：

可点击收缩，展开。

一，首先创建一个公共的文件夹树形表，里边放一个index.vue和eval.js

先看看index.vue，原理就是在元素用户界面的基础上做了进一步改造。

//利用元素用户界面的模板槽-范围="范围"属性，在插入多级表格模板El-table : data=' format data ' : row-style=' show row ' v-bind=' $ attrs ' El-table-columns v-if=' columns。长度==' 0 '宽度=' 150 '模板slot-scope=' scope ' span v-for=' scope。划船。_ level ' class=' ms-tree-space ' : key=' space '/span span class=' tree-ctrl ' v-if=' icon show(0，scope$index)' i v-if='！范围。划船。_ expanded ' class=' El-icon-plus '/I I v-else class=' El-icon-减/i /span {{scope .$ index } }/template/El-table-column El-table-column v-else v-for='(column，index)在列“:键=”列。值“: label=”列。text ' : width='列。'宽度'模板slot-scope=' scope ' span v-if=' index===0 ' v-for=' scope。row _ level ' class=' ms-tree-space ' : key=' space '/span span class $ index)' I v-if='！范围。划船。_ expanded ' class=' El-icon-plus '/I I v-else class=' El-icon-减/I/span { { scope。行[列。value]}/template/El-table-column slot/slot/El-table/template script从“”导入树到数组./eval ' export default { name : ' tree table '，prop : { data : { type :[Array，Object]，required: true }，columns: { type: Array，default: ()=[] }，evalFunc: Function，evalArgs: Array，expandAll: { type 333333: Boolean，default: false } }，computed:格式化数据源formatData:函数(){让tmp if(！数组。伊萨瑞(这。data)){ tmp=[this。data]} else { tmp=this。data } const func=this。evalufunc | | treeToArray const args=this。评价者？Array.concat([tmp，这个。expandal]，这个。evaluargs):[tmp，这个。expandal]返回函数。apply(null，args) }，methods: { showRow:函数(row) { const show=(row.row.parent？(排。划船。父母。_扩展行。划船。父母。_ show): true)行。划船。_ show=show返回显示？动画：表格显示1s；-web套件-动画： tree tableshow 1s: ' display:none' }，//切换下级是否展开toggleExpanded:函数(trIndex){ const record=this。格式化数据[trIndex]记录_expanded=！记录_expanded }，//图标显示iconShow(索引，记录){ return(索引===0记录。儿童唱片。孩子们。长度0)} }/脚本样式rel='样式表/CSS ' @关键帧treetleshow {来自{ opa city 3360 0；}到{ opa city 3360 1；} } @-网络工具包-关键帧treeTableShow {来自{ opa city 3360 0；}到{ opa city 3360 1；} }/style style lang=' SCS ' rel='样式表/SCS '作用域为$ color-blue : # 2196 F3；$空间宽度： 18px。ms-树-空间{位置：相对；top: 1pxdisplay:内联块；字体样式：正常；字体粗细： 400；线高： 1;宽度：美元空间宽度；height : 14px { content : ' ' } }之前的：处理容器{宽度： 100%；高度： 100%;}表格TD {行高： 26px} .tree-ctrl { position :相对；光标：指针；颜色：美元颜色-蓝色；边距-左侧：-$空格宽度；}/styleeval.js

/* * * @作者： hyf * @日期： 2018-10-27 */'使用严格的从“vue”导出导入Vue默认函数treeToArray(data，expandAll，parent=null，level=null){ let tmp=[]array。来自(数据).forEach(函数（记录){ if(记录_expanded===undefined) { Vue.set(记录，' _expanded '，expandal)} let _ level=1 if(level！==未定义级别！==null) { _level=level 1 } Vue.set(记录，' _level '，_level) //如果有父元素if (parent) { Vue.set(record，' parent，parent)} tmp。推动(记录)如果(记录。儿童唱片。孩子们。长度0){ const children=treeToArray(记录。children，expandAll，record，_ level)tmp=tmp。concat(children)} })返回tmp }二，页面中的用法

模板div class=' app-container ' tree-table : data=' data ' : columns=' columns '边框/tree-table/div/templatescript从“@/components/tree table”导入tree table导出默认{ name : ' tree table demo '，components: { treeTable }，data(){ return { columns 3360 [{ text : }事件，value: 'event '，width: 200 }，{ text: 'ID '，value: 'id' }，{ text: '时间线，值： ' TiME ' }，text: '备注，value: 'comment' } ]，data: [ { id: 0，event: '事件1 ',时间线： 50,评论： '无}，{ id: 1，event: '事件1 ',时间线： 100,注释： '无，children: [ { id: 2，event: '事件2', 时间线： 10,评论： '无}，{ id: 3，event: '事件3 ',时间线： 90,评论： '无，children: [ { id: 4，event: '事件4 ',时间线： 5,评论： '无}，{ id: 5，event: '事件5 ',时间线： 10,评论： '无}，{ id: 6，event: '事件6 ',时间线： 75,评论： '无，children: [ { id: 7，event: '事件7 ',时间线： 50,评论： '无，children: [ { id: 71，event: '事件71 '，timeLine: 25，comment: 'xx' }，{ id: 72，event: '事件72 '，timeLine: 5，comment: 'xx' }，{ id: 73，事件： '事件73 '，timeLine: 20，comment: 'xx' } ] }，{ id: 8，event: '事件8 ',时间线： 25,评论： '无}]}]}]}]}]} } } } } }脚本一下为一些整体思路，以及一些说明，方便后续使用

写在前面

此组件仅提供一个创建TreeTable的解决思路

支柱说明

数据

必填

原始数据，要求是一个数组或者对象

[{ key1:值1、键2:值2、儿童： [{ key1:值1 }，{ key1:值1 }] }，key1:值1 }]或者

{ key1:值1、键2:值2、儿童： [{ key1:值1 }，{ key1:值1 }]列

列属性，要求是一个数组

文本：显示在表头的文字值：对应数据的钥匙。树表将显示相应的valuewidth:每列的宽度，为一个数字（可选)

如果你想要每个字段都有自定义的样式或者嵌套其他组件，列可不提供，直接像在埃尔表一样写即可，如果没有自定义内容，提供列将更加的便捷方便

如果你有几个字段是需要自定义的，几个不需要，那么可以将不需要自定义的字段放入列，将需要自定义的内容放入到狭槽中，详情见后文

[{value:string，text:string，width:number}，{value:string，text:string，width:number}]默认情况下全部展开，布尔值，默认值为false

EvalFunc解析函数，函数，不是必需的。如果没有提供，将使用默认的evalFunc

evalArgs解析函数的参数是一个数组

请注意，自定义解析函数的第一个参数是this.data，第二个参数是this.expandAll，所以不需要填入evalArgs。必须记住，这两个参数是强制性的，它们的位置不能颠倒。this.data是要解析的数据，this.expandAll是默认情况下是否展开。如果解析函数所需的参数是(这。数据，这个。expandall，1，2，3，4)，那么你只需要把[1，2，3，4]赋值给evalArgs。如果您的分析函数参数只有(this.data，this.expandAll)，那么您不必填写评估参数

狭槽

这是自定义列的插槽。默认情况下，treeTable只有一行显示数据。但一般情况下，我们需要在行中添加一个动作按钮，或者根据当前行的数据显示不同的样式，所以需要自定义列。插槽和列属性可以同时存在，列中的数据列将显示在插槽自定义列的左侧

其他的

如有其他要求，请参考el-table的api自行修改index.vue

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。