把element-ui表格改成表格树

最近在vue项目中用到了表格树，like this

element-ui以前是不支持表格树的，谁曾想，随着它的升级，居然也支持表格树了

我忙前忙后忙活半天，各种百度，最后弄出来了，发现element-ui支持表格树了，，这找谁说理去？于是我找了个墙角冷静了一会，最终决定还是把代码发上来，供大家参考吧！
既然是表格树，那么就是一个组件，我直接上代码了，我决定直接开始装逼！

1.TreeGrid.vue

<template>
    <el-table :data="data" border style="width: 100%" :height="height" :row-style="showTr" size="mini">
        <el-table-column v-for="(column,index) in columns" :key="column.dataIndex" :label="column.text" show-overflow-tooltip>
            <template slot-scope="scope">
                <span v-if="spaceIconShow(index)" v-for="(space, levelIndex) in scope.row._level" class="ms-tree-space"></span>
                    <i v-if="!scope.row._expanded && toggleIconShow(index,scope.row)" class="el-icon-caret-right" aria-hidden="true" @click="toggle(scope.$index)"></i>
                    <i v-if="scope.row._expanded && toggleIconShow(index,scope.row)" class="el-icon-caret-bottom" aria-hidden="true" @click="toggle(scope.$index)"></i>
                <span>
                    {{scope.row[column.dataIndex]}}
                </span>
            </template>
        </el-table-column>
    </el-table>
</template>
<script src="./index.js"></script>
<style lang="scss" scoped src="./index.scss"></style>

2.index.scss

.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;
}

3.index.js

import tool from '../../server/tool';
//  import Vue from 'vue'
export
default {
    name: 'TreeGrid',
    props: {
        // 该属性是确认父组件传过来的数据是否已经是树形结构了，如果是，则不需要进行树形格式化
        treeStructure: {
            type: Boolean,
            default: function () {
                return false
            }
        },
        height: {
            type: Number,
            default: function () {
                return 500
            }
        },
        more: {
            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 = tool.treeToArray(me.dataSource, null, null, me.defaultExpandAll)
                return data
            }
            return me.dataSource
        }
    },
    methods: {
        // 显示行
        showTr(row, index) {
                let show = (row.row._parent ? (row.row._parent._expanded && row.row._parent._show) : true)
                row.row._show = show
                return show ? '' : 'display:none;'
        },
        // 展开下级
        toggle(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
        },
    }
}

上面引用了一个tool.js，那么我把它也放出来

import Vue from 'vue';
export default{
    treeToArray(data, parent, level, expandedAll){
        let tmp = []
        Array.from(data).forEach((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 = this.treeToArray(record.children, record, _level, expandedAll)
                tmp = tmp.concat(children)
            }
        })
        return tmp;
    }
}

这样就大功告成了，使用的话就是这个样子滴

<TreeGrid :columns="columns" :tree-structure="true" :data-source="dataSource" :height = "tableHeight"></TreeGrid>

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: '男'
              }
            ],

一句话，完美！
三哥的微信公众号，打开你的微信，扫描它，然后带走我！嘻嘻！

三哥QQ交流群

来源：CSDN

作者：三哥玩前端

链接：https://blog.csdn.net/zhaoxiang66/article/details/90072004