这篇文章主要为大家详细介绍了vue+element UI实现树形表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue+element UI实现树形表格的具体代码，供大家参考，具体内容如下
一、在component文件夹下新建如下treeTable文件夹，里面有2个文件：
eval.js:将数据转换成树形数据
/** * @Author: jianglei * @Date: 2017-10-12 12:06:49 */ 'use strict' 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 }
index.vue:树形表格组件
<span class="ms-tree-space" /><span class="tree-ctrl"> <i class="el-icon-plus" /><i class="el-icon-minus" /></span> {{ scope.$index }} <!-- Todo --><!-- eslint-disable-next-line vue/no-confusing-v-for-v-if --><span class="ms-tree-space" /><span class="tree-ctrl"> <i class="el-icon-plus" /><i class="el-icon-minus" /></span> {{ scope.row[column.value] }} @keyframes treeTableShow { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes treeTableShow { from { opacity: 0; } to { opacity: 1; } } .ms-tree-space { position: relative; top: 1px; display: inline-block; font-style: normal; font-weight: 400; line-height: 1; width: 18px; height: 14px; } .ms-tree-space::before { content: ""; } .<a style="color:transparent">来@源gao*daima.com搞@代#码网</a>processContainer { width: 100%; height: 100%; } table td { line-height: 26px; } .tree-ctrl { position: relative; cursor: pointer; color: #2196f3; margin-left: -18px; }
二、在需要的地方引入该组件
例如：在component文件夹下新建a.vue:
import treeTable from "./TreeTable"; components: { treeTable }, data() { return { columns: [ { text: "事件", value: "event", width: 200 }, { text: "ID", value: "id" }, { text: "时间线", value: "timeLine" }, { text: "备注", value: "comment" } ], data: [ { id: 0, event: "事件1", timeLine: 50, comment: "无" }, { id: 1, event: "事件1", timeLine: 100, comment: "无", children: [ { id: 2, event: "事件2", timeLine: 10, comment: "无" }, { id: 3, event: "事件3", timeLine: 90, comment: "无", children: [ { id: 4, event: "事件4", timeLine: 5, comment: "无" }, { id: 5, event: "事件5", timeLine: 10, comment: "无" }, { id: 6, event: "事件6", timeLine: 75, comment: "无", children: [ { id: 7, event: "事件7", timeLine: 50, comment: "无", children: [ { id: 71, event: "事件71", timeLine: 25, comment: "xx" }, { id: 72, event: "事件72", timeLine: 5, comment: "xx" }, { id: 73, event: "事件73", timeLine: 20, comment: "xx" } ] }, { id: 8, event: "事件8", timeLine: 25, comment: "无" } ] } ] } ] } ] }; },
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是vue+element UI实现树形表格的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue+element UI实现树形表格
转载请注明原文链接：vue+element UI实现树形表格
