https://www.jianshu.com/p/d38f2857bb5b
一：在component文件夹下新建如下treeTable文件夹，里面有2个文件：
eval.js:将数据转换成树形数据
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
}
TreeTable.vue:树形表格组件
<template>
<el-table :data="formatData" :row-style="showRow" v-bind="$attrs">
<el-table-column v-if="columns.length === 0" width="150">
<template slot-scope="scope">
<span
v-for="space in scope.row._level"
:key="space"
class="ms-tree-space"
></span>
<span
v-if="iconShow(0, scope.row)"
class="tree-ctrl"
@click="toggleExpanded(scope.$index)"
>
<i v-if="!scope.row._expanded" class="el-icon-plus"></i>
<i v-else class="el-icon-minus"></i>
</span>
{{ scope.$index }}
</template>
</el-table-column>
<el-table-column
v-for="(column, index) in columns"
v-else
:key="column.value"
:label="column.text"
:width="column.width"
>
<template slot-scope="scope">
<span v-if="index === 0">
<span
v-for="space in scope.row._level"
:key="space"
class="ms-tree-space"
></span>
</span>
<span
v-if="iconShow(index, scope.row)"
class="tree-ctrl"
@click="toggleExpanded(scope.$index)"
>
<i v-if="!scope.row._expanded" class="el-icon-plus"></i>
<i v-else class="el-icon-minus"></i>
</span>
{{ scope.row[column.value] }}
</template>
</el-table-column>
<el-table-column
align="center"
width="300"
label="操作">
<template slot-scope="scope">
<el-button type="text" @click="itemClick(scope.row,1)">查看</el-button>
<el-button type="text" @click="itemClick(scope.row,2)">设置</el-button>
<el-button type="text" @click="itemClick(scope.row,3)">添加子机构</el-button>
</template>
</el-table-column>
<slot />
</el-table>
</template>
<script>
import treeToArray from "./eval.js";
export default {
name: "TreeTable",
props: {
/* eslint-disable */
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: {
itemClick: function(row,value){
this.$emit('parnet-click',row,value);
},
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 1s;-webkit-animation:treeTableShow 1s"}
:
{
display:"none"
}
},
// 切换下级是否展开
toggleExpanded: function(trIndex) {
const record = this.formatData[trIndex];
record._expanded = !record._expanded;
},
// 图标显示
iconShow(index, record) {
return index === 0 && record.children && record.children.length > 0;
}
}
};
</script>
<style rel="stylesheet/css">
@keyframes treeTableShow {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes treeTableShow {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
<style scoped>
.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: "";
}
.processContainer {
width: 100%;
height: 100%;
}
table td {
line-height: 26px;
}
.tree-ctrl {
position: relative;
cursor: pointer;
color: #2196f3;
margin-left: -18px;
}
</style>
二：在需要的地方引入该组件：
例如：在component文件夹下新建home.vue:
<template>
<tree-table :data="data1" :columns="columns1" v-on:parnet-click="handleClick" border />
</template>
<script>
import treeTable from "./TreeTable";
export default {
name: "LoginForm",
data() {
return {
columns: [
{
text: "机构名称",
value: "departmentName",
align: "left"
},
{
text: "机构类型",
value: "departmentType"
},
{
text: "机构描述",
value: "description"
},
{
text: "修改时间",
value: "modifyTime"
}
],
data: [
{
id: 1,
parentId: 0,
departmentName: "测试1",
departmentType: 18,
description: "男",
modifyTime: "2019-10-10",
children: [
{
id: 2,
parentId: 1,
departmentName: "测试2",
departmentType: 22,
description: "男",
modifyTime: "2019-10-10"
}
]
},
{
id: 3,
parentId: 0,
departmentName: "测试3",
departmentType: 23,
description: "女",
modifyTime: "2019-10-10",
children: [
{
id: 4,
parentId: 3,
departmentName: "测试4",
departmentType: 22,
description: "男",
modifyTime: "2019-10-10"
},
{
id: 5,
parentId: 3,
departmentName: "测试5",
departmentType: 25,
description: "男",
modifyTime: "2019-10-10"
},
{
id: 6,
parentId: 3,
departmentName: "测试6",
departmentType: 26,
description: "女",
modifyTime: "2019-10-10",
children: [
{
id: 7,
parentId: 6,
departmentName: "测试7",
departmentType: 27,
description: "男",
modifyTime: "2019-10-10"
}
]
}
]
},
{
id: 18,
parentId: 0,
departmentName: "测试8",
departmentType: 18,
description: "男"
}
]
};
},
components: { treeTable },
computed: {},
mounted() {
},
methods: {
// 表格后面的点击事件
handleClick(row, type) {
console.log(row, type);
},
}
};
</script>
<style lang="less" scoped>
</style>
网友评论