这篇文章将为大家详细讲解有关怎么在vue中使用element UI实现一个树形表格,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
创新互联建站主要从事成都网站设计、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务凌源,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
一:在component文件夹下新建如下treeTable文件夹,里面有2个文件:
eval.js:将数据转换成树形数据
"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.child && record.child.length > 0) { const child = treeToArray(record.child, expandAll, record, _level); tmp = tmp.concat(child); } }); return tmp; }
index.vue:树形表格组件
{{ scope.$index }} {{ scope.row[column.value] }}
二:在需要的地方引入该组件:
例如:在component文件夹下新建a.vue:
import treeTable from "./TreeTable"; components: { treeTable }, data() { return { columns: [ { text: "事件", value: "event", width: 200 }, { text: "ID", value: "id" } ], 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: "无" } ] } ] } ] } ] }; },
关于怎么在vue中使用element UI实现一个树形表格就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。