树表格的实现
https://www.cnblogs.com/yuwenjing0727/p/9487779.html
有时候我们会遇到表格树的展示,类似于下图的需求:
其中组件的封装主要在table-tree文件夹内:
main.vue的内容如下:
<template>
<el-table :data="formatData"
:stripe="option.stripe"
:row-style="showRow"
:row-class-name="rowClassName"
v-bind="$attrs"
:border="border">
<el-table-column v-if="columns.length===0"
width="150">
<template slot-scope="scope">
<span v-for="space in scope.row._level"
class="ms-tree-space"
:key="space"></span>
<span class="tree-ctrl"
v-if="iconShow(0,scope.row)"
@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-else
v-for="(column, index) in columns"
:key="column.value"
:label="column.text"
:width="column.width">
<template slot-scope="scope">
<span v-if="index === 0"
v-for="space in scope.row._level"
class="ms-tree-space"
:key="space"></span>
<span class="tree-ctrl"
v-if="iconShow(index,scope.row)"
@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>
<slot></slot>
</el-table>
</template>
<script>
import treeToArray from "./eval";
export default {
name: "AvueTreeTable",
props: {
option: {
type: Object,
required: true
},
rowClassName: Function,
evalFunc: Function,
evalArgs: Array
},
data() {
return {};
},
created() {},
computed: {
data: function() {
return this.option.data || [];
},
columns: function() {
return this.option.columns || [];
},
expandAll: function() {
return this.option.expandAll;
},
border: function() {
return this.option.border || true;
},
// 格式化数据源
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 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 lang="scss" rel="stylesheet/scss" scoped>
$color-blue: #2196f3;
$space-width: 18px;
.ms-tree-space {
position: relative;
top: 1px;
display: inline-block;
font-style: normal;
font-weight: 400;
line-height: 1;
width: $space-width;
height: 14px;
&::before {
content: "";
}
}
.processContainer {
width: 100%;
height: 100%;
}
table td {
line-height: 26px;
}
.tree-ctrl {
position: relative;
cursor: pointer;
color: $color-blue;
margin-left: -$space-width;
}
</style>
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.js的内容如下:
import TableTree from './src/main';
/* istanbul ignore next */
TableTree.install = function(Vue) {
Vue.component(TableTree.name, TableTree);
};
export default TableTree;
在其他组件内只需要引入main.vue即可,
js中option变量为:
option: {
expandAll: true,
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: '无'
}
]
}
]
}
]
}
]
}
哈哈哈,这样就实现了表格树
但是有时候我们要自定义表格的列,如下图:
实现方式如下(底层封装组件不变,只是在引用的组件内做些改变即可):
<tree-table :option="option">
<el-table-column label="事件">
<template slot-scope="scope">
<span style="color:sandybrown">{{scope.row.event}}</span>
<el-tag>{{scope.row.timeLine+'ms'}}</el-tag>
</template>
</el-table-column>
<el-table-column label="时间线">
<template slot-scope="scope">
<el-tooltip effect="dark"
:content="scope.row.timeLine+'ms'"
placement="left">
<div class="processContainer">
<div class="process"
:style="{ width:scope.row._width * 500+'px',
background:scope.row._width>0.5?'rgba(233,0,0,.5)':'rgba(0,0,233,0.5)',
marginLeft:scope.row._marginLeft * 500+'px' }">
<span style="display:inline-block"></span>
</div>
</div>
</el-tooltip>
</template>
</el-table-column>
<el-table-column label="操作"
width="200">
<template slot-scope="scope">
<el-button type="text"
@click="message(scope.row)">点击</el-button>
</template>
</el-table-column>
<tree-table>
option: {
data: {
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: '无'
}
]
}
]
}
]
}
}