ElementUI制作树形表组件

提要

最近项目中需要用到树形表格来描述部门、区域之间的父子展开关系。但是已经在项目中使用的Vue的成熟组件ElementUI以及iViewUI组件都没有提供相应的树形表格组件，无奈找了其他替代方案也都被pass掉了，只能从改造现有组件放面着手。

在网上也找到了一些实践案例：http://blog.csdn.net/s8460049/article/details/61414751

第一种方案

第一种方案就是原作者介绍的，即将具有层级关系的数据进行提前处理。比如： 数据结构为：

[
    {
        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一下就拿过来用，更多的应该是理解其中的原理，并且自己进行实践才能进步。

不明白的地方，欢迎提问交流！