提要
最近项目中需要用到树形表格来描述部门、区域之间的父子展开关系。但是已经在项目中使用的Vue的成熟组件ElementUI以及iViewUI组件都没有提供相应的树形表格组件，无奈找了其他替代方案也都被pass掉了，只能从改造现有组件放面着手。
在网上也找到了一些实践案例：
第一种方案
第一种方案就是原作者介绍的，即将具有层级关系的数据进行提前处理。比如： 数据结构为：
[
{
id: 1,
parentId: 0,
name: '测试1',
age: 18,
sex: '男',
children: [
{
id: 2,
parentId: 1,
name: '测试2',
age: 22,
sex: '男'
}
]
},
{
id: 3,
parentId: 0,
name: '测试3',
age: 23,
sex: '女',
children: [
{
id: 4,
parentId: 3,
name: '测试4',
age: 22,
sex: '男'
},
{
id: 5,
parentId: 3,
name: '测试5',
age: 25,
sex: '男'
},
{
id: 6,
parentId: 3,
name: '测试6',
age: 26,
sex: '女',
children: [
{
id: 7,
parentId: 6,
name: '测试7',
age: 27,
sex: '男'
}
]
}
]
},
{
id: 18,
parentId: 0,
name: '测试8',
age: 18,
sex: '男'
}
]
这样可以通过数据转换方法，把每一条数据从它的父级中取出来，把树形结构数据转换成数组数据。
dataTranslate.js内容：
import Vue from 'vue'
function DataTransfer (data) {
if (!(this instanceof DataTransfer)) {
return new DataTransfer(data, null, null)
}
}
DataTransfer.treeToArray = function (data, parent, level, expandedAll) {
let tmp = []
Array.from(data).forEach(function (record) {
if (record._expanded === undefined) {
Vue.set(record, '_expanded', expandedAll)
}
if (parent) {
Vue.set(record, '_parent', parent)
}
let _level = 0
if (level !== undefined && level !== null) {
_level = level + 1
}
Vue.set(record, '_level', _level)
tmp.push(record)
if (record.children && record.children.length > 0) {
let children = DataTransfer.treeToArray(record.children, record, _level, expandedAll)
tmp = tmp.concat(children)
}
})
return tmp
}
export default DataTransfer
有了进行数据转换的方法之后，开始正式些数据TreeGrid.vue组件：
<template>
<el-table
:data="data"
border
style="width: 100%"
:row-style="showTr">
<el-table-column v-for="(column, index) in columns" :key="column.dataIndex"
:label="column.text">
<template scope="scope">
<span v-if="spaceIconShow(index)" v-for="(space, levelIndex) in scope.row._level" class="ms-tree-space"></span>
<button class="button is-outlined is-primary is-small" v-if="toggleIconShow(index,scope.row)" @click="toggle(scope.$index)">
<i v-if="!scope.row._expanded" class="el-icon-caret-right" aria-hidden="true"></i>
<i v-if="scope.row._expanded" class="el-icon-caret-bottom" aria-hidden="true"></i>
</button>
<span v-else-if="index===0" class="ms-tree-space"></span>
{{scope.row[column.dataIndex]}}
</template>
</el-table-column>
<el-table-column label="操作" v-if="treeType === 'normal'" width="260">
<template scope="scope">
<button type="button" class="el-button el-button--default el-button--small">
<router-link
:to="{ path: requestUrl + 'edit', query: {id: scope.row.Oid} }"
tag="span">
编辑
</router-link>
</button>
<el-button
size="small"
type="danger"
@click="handleDelete()">
删除
</el-button>
<button type="button" class="el-button el-button--success el-button--small">
<router-link :to="{ path: requestUrl, query: {parentId: scope.row.parentOId} }"
tag="span">
添加下级树结构
</router-link>
</button>
</template>
</el-table-column>
</el-table>
</template>
<script>
import DataTransfer from '../utils/dataTranslate.js'
import Vue from 'vue'
export default {
name: 'tree-grid',
props: {
// 该属性是确认父组件传过来的数据是否已经是树形结构了，如果是，则不需要进行树形格式化
treeStructure: {
type: Boolean,
default: function () {
return false
}
},
// 这是相应的字段展示
columns: {
type: Array,
default: function () {
return []
}
},
// 这是数据源
dataSource: {
type: Array,
default: function () {
return []
}
},
// 这个作用是根据自己需求来的，比如在操作中涉及相关按钮编辑，删除等，需要向服务端发送请求，则可以把url传过来
requestUrl: {
type: String,
default: function () {
return ''
}
},
// 这个是是否展示操作列
treeType: {
type: String,
default: function () {
return 'normal'
}
},
// 是否默认展开所有树
defaultExpandAll: {
type: Boolean,
default: function () {
return false
}
}
},
data () {
return {}
},
computed: {
// 格式化数据源
data: function () {
let me = this
if (me.treeStructure) {
let data = DataTransfer.treeToArray(me.dataSource, null, null, me.defaultExpandAll)
console.log(data)
return data
}
return me.dataSource
}
},
methods: {
// 显示行
showTr: function (row, index) {
let show = (row._parent ? (row._parent._expanded && row._parent._show) : true)
row._show = show
return show ? '' : 'display:none;'
},
// 展开下级
toggle: function (trIndex) {
let me = this
let record = me.data[trIndex]
record._expanded = !record._expanded
},
// 显示层级关系的空格和图标
spaceIconShow (index) {
let me = this
if (me.treeStructure && index === 0) {
return true
}
return false
},
// 点击展开和关闭的时候，图标的切换
toggleIconShow (index, record) {
let me = this
if (me.treeStructure && index === 0 && record.children && record.children.length > 0) {
return true
}
return false
},
handleDelete () {
this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'error'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
}
}
}
</script>
<style scoped>
.ms-tree-space{position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
width: 18px;
height: 14px;}
.ms-tree-space::before{content: ""}
table td{
line-height: 26px;
}
</style>
写好了树形表格组件，使用方式和普通的Vue组件使用方法相同：
<template>
<div class="hello">
<tree-grid :columns="columns" :tree-structure="true" :data-source="dataSource"></tree-grid>
</div>
</template>
<script>
import {TreeGrid} from './TreeGrid'
export default {
name: 'hello',
data () {
return {
columns: [
{
text: '姓名',
dataIndex: 'name'
},
{
text: '年龄',
dataIndex: 'age'
},
{
text: '性别',
dataIndex: 'sex'
}
],
dataSource: [
{
id: 1,
parentId: 0,
name: '测试1',
age: 18,
sex: '男',
children: [
{
id: 2,
parentId: 1,
name: '测试2',
age: 22,
sex: '男'
}
]
},
{
id: 3,
parentId: 0,
name: '测试3',
age: 23,
sex: '女',
children: [
{
id: 4,
parentId: 3,
name: '测试4',
age: 22,
sex: '男'
},
{
id: 5,
parentId: 3,
name: '测试5',
age: 25,
sex: '男'
},
{
id: 6,
parentId: 3,
name: '测试6',
age: 26,
sex: '女',
children: [
{
id: 7,
parentId: 6,
name: '测试7',
age: 27,
sex: '男'
}
]
}
]
},
{
id: 18,
parentId: 0,
name: '测试8',
age: 18,
sex: '男'
}
]
}
},
components: {
TreeGrid
}
}
</script>
以上就是实现树形表格的方法，提前把树形表格数据处理成数组数据，然后针对父级和子集分别增加不同的表示，以实现不同的表格首行显示效果。
但是，该组件将说有数据都加在到Table中，然后采用操作css样式"display:none"的方式进行隐藏和显示。数量比较时候倒是可以完全满足使用，但是如果数据量超过100条或者更多就会出现页面卡顿的现象。
第二种方式
第二种方式在原方法的基础上进行操作，原理就是基于MVVM框架vue的数据驱动原理。采用操作数据的方式执行子级数据的显示隐藏。
根据ElementUI 的 Table组件会根据数据变化进行加载的原理，通过只传入需要展示的数据的方式，来提高浏览器渲染的速度。
直接上代码TreeGrid.vue：
<template>
<div class="table-content">
<el-table
:data="TableDate"
border
style="width: 18.82rem">
<el-table-column
label="部门名称"
min-width="400">
<template scope="scope">
<span v-for="(space, levelIndex) in scope.row._level" :key="levelIndex" class="ms-tree-space"></span>
<span class="button is-outlined is-primary is-small" v-if="toggleIconShow(scope.row)" @click="toggle(scope.row)">
<i v-if="!scope.row._expanded" class="el-icon-arrow-right" aria-hidden="true"></i>
<i v-if="scope.row._expanded" class="el-icon-arrow-down" aria-hidden="true"></i>
</span>
<span v-else class="ms-tree-space"></span>
<span :title="scope.row.dpmName">
{{ scope.row.dpmName }}
</span>
</template>
</el-table-column>
<el-table-column
label="组织机构代码"
min-width="300">
<template scope="scope">
<span :title="scope.row.dpmAdc">
{{ scope.row.dpmAdc }}
</span>
</template>
</el-table-column>
<el-table-column
label="所属地区"
min-width="300">
<template scope="scope">
<span :title="scope.row.areaName">
{{ scope.row.areaName }}
</span>
</template>
</el-table-column>
<el-table-column
label="上级部门"
min-width="315">
<template scope="scope">
<span :title="scope.row.parentName">
{{ scope.row.parentName }}
</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import {deepCopy} from "../utils/util.js"
Array.prototype.removeByValue = function(val) {
//对数组原型添加删除指定项的方法
for(var i=0; i<this.length; i++) {
if(this[i] == val) {
this.splice(i, 1);
break;
}
}
};
export default {
name: 'TreeGrid',
components: {
},
data(){
return {
TableDate:[]
}
},
computed:{
allData(){
let me = this;
let newData = deepCopy(me.$store.getters.Data);
return newData;
}
},
watch: {
allData(val){
this.TableDate = deepCopy(val);
}
},
methods: {
toggleIconShow (record) {
/**
* 点击展开和关闭的时候，图标的切换
*/
let me = this;
if (record.children && record.children.length > 0) {
return true
}
return false
},
toggle(rowData) {
let me = this;
/**
* 展开下级
*/
let childLen = rowData.children.length;
if(rowData._expanded){
let dataArr=[];
dataArr.push(rowData);
let arr = me.getChildFlowId(dataArr,[]);
for(let i=0; i < childLen; i++){
me.TableDate.map((value)=>{
if(arr.indexOf(value.parentId) > -1){
me.TableDate.removeByValue(value);
}
});
}
} else {
rowData.children = me.setSpaceIcon(rowData.children,rowData._level);
let index = me.TableDate.indexOf(rowData);
let pre = me.TableDate.slice(0,index+1);
let last = me.TableDate.slice(index+1);
let concatChildren = pre.concat(rowData.children);
me.TableDate = concatChildren.concat(last);
}
rowData._expanded = !rowData._expanded;
},
getChildFlowId(data,emptyArr){
// 获取子级的flowId
let me = this;
Array.from(data).forEach((record)=>{
emptyArr.push(record.flowId);
if(record.children&&record.children.length > 0){
let childFlowIdArr = me.getChildFlowId(record.children,emptyArr);
emptyArr.concat(childFlowIdArr);
}
});
return emptyArr;
},
setSpaceIcon(data,level){
// 设置第一列的空格和方向按钮
let me = this;
let _level = 0;
data.forEach((value)=>{
value._expanded = false;
if(level !== undefined && level !== null){
_level = level + 1;
} else {
_level = 1;
}
value._level = _level;
if(value.children&&value.children.length > 0){
me.setSpaceIcon(value.children, _level);
}
});
return data;
}
}
}
</script>
虽然上了大段的代码，不过也有很多不细致的地方。重点还是理解实现的方式，尽量减少需要写个方法或者组件的时候，在网上Google一下就拿过来用，更多的应该是理解其中的原理，并且自己进行实践才能进步。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
