vue elementui 树,elementui表格树形结构
这篇文章主要为大家详细介绍了某视频剪辑软件元素用户界面实现树形表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件元素用户界面实现树形表格的具体代码，供大家参考，具体内容如下
一、在成分文件夹下新建如下树表文件夹，里面有2个文件：
eval.js:将数据转换成树形数据
/**
* @作者：姜磊
* @日期：2017-10-12 12:06:49
*/
使用严格
从“vue”导入某视频剪辑软件
导出默认函数treeToArray(data，expandAll，parent=null，level=null) {
设tmp=[]
数组. from(数据)。forEach(函数（记录){
如果（记录. expanded===undefined) {
Vue.set(记录， _expanded ，expandAll)
}
let _level=1
如果（水平！==未定义级别！==null) {
_ level=级
}
Vue.set(记录， _level ，_level)
//如果有父元素
如果（父项){
Vue.set(记录，父级，父级)
}
tmp.push(记录)
如果(记录。儿童唱片。孩子。长度0){
const children=treeToArray(记录。孩子，扩展，记录，_级)
tmp=tmp.concat(子节点)
}
})
返回终端监督程式（Terminal Monitor Program的缩写）
}
index.vue:树形表格组件
模板
El-table:data= format data :row-style= showRow v-bind= $ attrs
El-table-column v-if=列。长度===0 宽度= 150
模板槽-范围="范围"
span v-for=范围内的空格。划。 level :key= space class= ms-tree-space /
span v-if=iconShow(0，范围。row) class= tree-ctrl @ click=切换扩展(范围.$index)
我v-if=！范围。划。_ expanded class= El-icon-plus /
i v-else class=el-icon-minus/
/span
{{范围. index $ index } }
/模板
/El-表格-列
el-table-column v-for=(column，index)在columns v-else:key=列中。 value :label=列。 text :width=列。宽度
模板槽-范围="范围"
！-托多-
！-eslint-disable-next-line vue/no-confusing-v-for-v-if-
span v-for=范围内的空格。划。_ level v-if= index===0 :key= space class= ms-tree-space /
span v-if=iconShow(索引，范围。row) class= tree-ctrl @ click=切换扩展(范围.$index)
我v-if=！范围。划。_ expanded class= El-icon-plus /
i v-else class=el-icon-minus/
/span
{{ scope.row[column.value] }}
/模板
/El-表格-列
插槽/
/el-table
/模板
脚本
/**
授权：雷。j1ang
创建时间：2018/1/19-13:59
*/
从导入treeToArray ./eval ；
导出默认值{
名称：树表，
道具：{
/* eslint-disable */
数据：{
类型：[数组，对象],
必填：真
},
列：{
类型：数组，
默认值：()=[]
},
评估函数：函数，
评估参数：数组，
扩展：{
类型：布尔型，
默认值：错误
}
},
计算值：{
//格式化数据源
formatData: function() {
让终端监督程式（Terminal Monitor Program的缩写）
如果(!Array.isArray(this.data)) {
tmp=[这个。数据]；
}否则{
tmp=this.data
}
const func=thiseval func treeToArray
const args=this.evalArgs
？Array.concat([tmp，this.expandAll]，this.evalArgs)
:【tmp，这个。expandall]；
return func.apply(null，args)；
}
},
方法：{
显示行：函数（行){
const show=row.row.parent
？划。划。父母。_展开的row.row.parent._show
：真；
row.row. _ show=show
返回显示
？动画：tree table show 1s-WebKit-动画：tree table show 1s
:显示：无；；
},
//切换下级是否展开
切换扩展：函数(三进制){
const记录=this。格式化数据[trIndex]；
记录. expanded=！记录。_已扩展；
},
//图标显示
图标显示（索引，记录){
返回索引===0条记录。儿童唱片。孩子。长度0；
}
}
};
/脚本
style rel=stylesheet/css
@关键帧树表显示{
从{
不透明度：0;
}
到{
不透明度：1;
}
}
@-网络工具包-关键帧树表显示{
从{
不透明度：0;
}
到{
不透明度：1;
}
}
/风格
样式范围。女士-树空间{
位置：相对；
top:1px；
显示：内嵌-块；
字体样式：正常；
字体粗细：400;
行高：1;
宽度：18px
高度：14px
}。女士-树空间*之前{
内容："";
}。processContainer {
宽度：100%;
身高：100%;
}
表td {
行高：26px
}。树形控件{
位置：相对；
光标：指针；
颜色：# 2196f3
左边距：-18px；
}
/风格
二、在需要的地方引入该组件
例如：在成分文件夹下新建a.vue:
tree-table:data= data :columns= columns border/
从导入树形表./tree table ；
组件：{ treeTable }
data() {
返回{
列：[
{
文本： 事件，
值："事件",
宽度：200
},
{
文本：“ID”，
值：" id "
},
{
文本： 时间线，
值："时间线"
},
{
文本： 备注，
值："注释"
}
],
数据：[
{
id: 0，
事件： 事件1,
时间线：50,
评论： 无
},
{
id: 1，
事件： 事件1,
时间轴：100,
评论： 无，
儿童：[
{
id: 2，
事件： 事件2,
时间线：10,
评论： 无
},
{
id: 3，
事件： 事件3,
时间轴：90年，
评论： 无，
儿童：[
{
id: 4，
事件： 事件4,
时间线：5,
评论： 无
},
{
id: 5，
事件： 事件5,
时间线：10,
评论： 无
},
{
id: 6，
事件： 事件6,
时间线：75,
评论： 无，
儿童：[
{
id: 7，
事件： 事件7,
时间线：50,
评论： 无，
儿童：[
{
身份证号：71,
事件： 事件71,
时间线：25,
注释：“xx”
},
{
身份证号：72,
事件： 事件72,
时间线：5,
注释：“xx”
},
{
身份证号：73,
事件： 事件73,
时间线：20,
注释：“xx”
}
]
},
{
id: 8，
事件： 事件8,
时间线：25,
评论： 无
}
]
}
]
}
]
}
]
};
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。