优雅的将ElementUI表格变身成树形表格的方法步骤
程序员文章站
2022-07-03 21:35:24
由于elementui目前还未开发树形表格组件,也参阅了网络上部分基于elementui表格封装的开源树形组件,如果想进行二次开发的话都不太理想,所以就萌生了自行开发树形表...
由于elementui目前还未开发树形表格组件,也参阅了网络上部分基于elementui表格封装的开源树形组件,如果想进行二次开发的话都不太理想,所以就萌生了自行开发树形表格。
本示例提供开发思路,移除了多余的样式,比较适合新手入门学习,如果应用于实际项目还请自行封装。
目前还仅仅实现了视觉的树结构的层级效果和控制结构的显示隐藏,后续还会进行不断的完善和优化,有必要的话会对组件进行二次封装,有点在重复造论的感觉哈。
效果图
完整代码
页面(tree-table.vue)
<template> <div> treetable <el-table :data="list" :row-style="tablerowstyle" border> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="id" label="id" width="180"> <template slot-scope="scope"> <span class="collapse" :class="collapseclass(scope.row)" :style="tablerowpaddingstyle(scope.row)" @click="handlecollapseclick(scope.row)"> </span> <span>{{ scope.row.id }}</span> </template> </el-table-column> <el-table-column prop="name" label="name"></el-table-column> </el-table> </div> </template> <script lang="ts"> import {component, vue} from 'vue-property-decorator' // 引入两个封装好的工具方法 import { arraytotree } from './utils/array.js' import { ergodictree } from './utils/tree.js' @component export default class treetable extends vue { private list: object[] = []; private tree: object[] = []; created() { // 准备一组含有父子级关系的一维数组方便示例测试 // 在实际项目应用中,理应通过后端接口返回 let _list = [ { id: 'a', pid: '', name: '部门a', children: [] }, { id: 'a1', pid: 'a', name: '子部门a1', children: [] }, { id: 'a2', pid: 'a', name: '子部门a2', children: [] }, { id: 'a2-1', pid: 'a2', name: '子部门a2-1', children: [] }, { id: 'a2-2', pid: 'a2', name: '子部门a2-2', children: [] }, { id: 'a3', pid: 'a', name: '子部门a3', children: [] }, { id: 'a3-1', pid: 'a3', name: '子部门a3-1', children: [] }, { id: 'b', pid: '', name: '部门b', children: [] }, { id: 'b1', pid: 'b', name: '子部门b1', children: [] }, { id: 'c', pid: '', name: '部门c', children: [] }, ]; // 将一维数组转成树形结构并存储于tree变量 this.tree = arraytotree(_list); // 考虑到实际应用过程中接口返回的数据是无序的,所以我们对tree进行先序遍历将节点一一插入到list变量 this.list = []; ergodictree(this.tree, (node: any) => { this.list.push(node); // 遍历过程中并对每个节点挂载open和show属性 // open:控制节点的打开和关闭 // show:控制节点的显示和隐藏 this.$set(node, 'open', true); this.$set(node, 'show', true) }) } // 控制行的显示和隐藏 tablerowstyle(scope: any) { return { 'display': scope.row.show ? '' : 'none' } } // 通过每个节点的深度,设置行的缩进实现视觉上的层级效果 tablerowpaddingstyle(row: any) { return { 'margin-left': `${(row._depth - 1) * 24}px` } } // 控制展开按钮的展开和关闭状态 collapseclass(row: any) { return { 'collapse--open': row.open == false && row.children && row.children.length > 0, 'collapse--close': row.open == true && row.children && row.children.length > 0 } } // 处理展开按钮的点击事件 handlecollapseclick(row: any) { const _open = row.open; // 通过节点访问路径控制节点的显示隐藏,由于内存指针的关系list和tree的节点操作都会相互影响 ergodictree(this.tree, (node: any) => { node._idpath.foreach((pathid: any) => { if (pathid == row.id) { this.$set(node, 'show', !_open); this.$set(node, 'open', !_open) } }) }); row.show = true; row.open = !_open; } } </script> <style lang="scss" scoped> .collapse { display: inline-block; width: 8px; cursor: pointer; margin-right: 8px; } .collapse--open:before { content: '+'; } .collapse--close:before { content: '-'; } </style>
工具方法
考虑数组转树和遍历树都是在实际项目中都是非常常用的,所以这边对这两个方法进行了封装。
数组转树结构(./utils/array.ts)
export function arraytotree(list: object[], props = {id: 'id', pid: 'pid', children: 'children'}) { let tree: object[] = []; let map: any = {}; let listlength = list.length; for (let i = 0; i < listlength; i++) { let node: any = list[i]; let nodeid: any = node[props.id]; map[nodeid] = node; } for (let i = 0; i < listlength; i++) { let node: any = list[i]; let nodepid: any = node[props.pid]; let parentnode: any = map[nodepid]; if (parentnode) { parentnode[props.children] = parentnode[props.children] || []; parentnode[props.children].push(node) } else { tree.push(node) } } return tree }
遍历树结构(./utils/tree.ts)
结合实际项目应用,我们采用了先序遍历法对树进行遍历,为了方便在业务代码里的应用,在遍历过程中会对每个节点挂载节点访问路径 _idpath 属性和节点深度 _depth 属性。
export function ergodictree(tree: object[], callback: any = () => {}, props = {id: 'id', pid: 'pid', children: 'children'}) { function _ergodictree(tree: object[], parentidpath?: any[], depth: number = 0) { const treelength = tree.length; for (let i = 0; i < treelength; i++) { let node: any = tree[i]; const _idpath: any[] = parentidpath ? [...parentidpath, node[props.id]] : [node[props.id]]; const _depth: number = depth + 1; node._idpath = _idpath; node._depth = _depth; callback(node); if (node[props.children] && node[props.children] instanceof array) { _ergodictree(node[props.children], _idpath, _depth) } } } _ergodictree(tree); return tree; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。