vue实现tree-table

elment有实现好的tree-table组件可以用,但是自己想自己写写看,写的有点挫,但是功能都实现了,特此记录下,如有不对的地方,欢迎指正.

效果图如下:

可以无限级展开

思路:将后端的数据处理生成树形结构,再通过深度优先算法,生成categoryList;这样就可以用table,直接v-for显示所有的类别,且对每个分类进行操作就会很方便,就跟table没有什么区别.

实现代码:

<template>
    <div class="table-tree">
        <table class="table table-border">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>编号</th>
                    <th>是否末级分类</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in categoryList" 
                    :key="item.id"
                    v-show="item.parentId ==0 || item.isShow"
                    @click="toggle(item)">
                    <td :style="{'padding-left':item.deepLength*20+'px'}">
                        <i :class="[item.isColspan?'el-icon-caret-bottom':'el-icon-caret-right']" v-show="!item.isLeaf"></i>{{item.name}}</td>
                    <td style="text-align:center;">{{item.cateNo}}</td>
                    <td style="text-align:center;">{{item.isLeaf | status}}</td>
                    <td>
                        <a @click.stop="editCate(item)">编辑</a>
                        <a @click.stop="editCate(item)">添加分类</a>
                        <a @click.stop="editCate(item)">删除</a>
                        <a @click.stop="editCate(item)">显示</a>
                        <a @click.stop="editCate(item)">上传图片</a>
                        <a @click.stop="editCate(item)">查看图片</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>

export default {
    name:'category-conf',
    data(){
        return{
            categoryList: [],
        }
    },
    methods: {
        toggle: function(item){

            let list = this.categoryList;

            function getAllChild (node){
                if(!node.isLeafe){
                    list.forEach((i) => {
                        if(i.parentId == node.id) {
                            i.isShow = false ;
                            i.isColspan = false ;
                            getAllChild(i);
                        }
                    })
                }        
            }

            //若是展开,则展开该级的下一级
            if(!item.isColspan){
               
                this.categoryList.forEach((i)=>{
                    if(i.parentId == item.id){
                        i.isShow = true;
                    }
                })
                item.isColspan = !item.isColspan
            } else {//若是收起,则收起该级下的所有
        
                getAllChild(item);
                this.categoryList = list;
                item.isColspan = !item.isColspan;
            }
            
        },
    },
    created:function(){
        this.getAllCategory().then((res)=>{ //this.getAllCategory是global.js中的公共方法
            let listOri = res.data.categoryLists;
            let list = listOri.reduce(function(prev, item){
                item.isShow = false;
                item.isColspan = false;
                prev[item.parentId]?prev[item.parentId].push(item):prev[item.parentId] = [item];
                return prev
            },{});
            
            for (let parentItem in list) {
                list[parentItem].forEach(function (item) {
                    item.children = list[item.id] ? list[item.id] : [];
                    });
            }

            this.cateListTree = list[0];
           
            //深度优先算法
            let cateList=[];
            function deepTraversal(node,deepLength){
                if(node!=null){
                    if(node.parentId == 0){
                        deepLength = 0;
                    }
                    node.deepLength = deepLength; //计算每个节点的深度
                    cateList.push(node);
                    let childrens=node.children;
                    deepLength ++;
                    for(let i=0;i<childrens.length;i++){
                        deepTraversal(childrens[i], deepLength);
                    }
                    
                }
            }
            this.cateListTree.forEach(function(item){
                deepTraversal(item)
            })
            this.categoryList = cateList;
        });
    },

}
</script>

<style scoped>

</style>