vue树形多列_vue-cli + element-ui 树形表格（多级表格折腾小计）

前沿

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

效果图：

基于vue的多级表格.png

可点击收缩，展开。

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

先看看index.vue，原理就是在element-ui的基础上做了进一步改造。

//利用element-ui的 属性，在插入多级表格

{ {scope.$index}}

{ {scope.row[column.value]}}

import treeToArray from './eval'

export default {

name: 'treeTable',

props: {

data: {

type: [Array, Object],

required: true

},

columns: {

type: Array,

default: () => []

},

evalFunc: Function,

evalArgs: Array,

expandAll: {

type: Boolean,

default: false

}

},

computed: {

// 格式化数据源

formatData: function() {

let tmp

if (!Array.isArray(this.data)) {

tmp = [this.data]

} else {

tmp = this.data

}

const func = this.evalFunc || treeToArray

const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]

return func.apply(null, args)

}

},

methods: {

showRow: function(row) {

const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true)

row.row._show = show

return show ? 'animation:treeTableShow 1