elementui，树形table如何显示线连接？

Question

需要用到elementui的表格，但是表格是树形的，想要做成和 tree 一样，显示链接线。本来想用 tree 组件实现的，但是需要像表格一样有很多列，tree 不好控制宽度。

参考：https://segmentfault.com/a/1190000043966941

改为vue版本：

treeTableItem.vue

<template>
    <details>
        <summary class="tree-item">
            {{ item.name }}
        </summary>
        <template v-if="item.children">
            <treeTableItem v-for="(i, idx) in item.children" :item="i"></treeTableItem>
        </template>
    </details>
</template>

<script>
import treeTableItem from './treeTableItem'
export default {
    name: 'treeTableItem',
    components: {
        treeTableItem,
    },
    props: {
        item: Object
    },
    data() {
        return {

        }
    },
}
</script>


<style lang="scss" scoped>
.tree-item{
    display: flex;
}


/deep/ summary::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    height: 38px;
    background: #eef2ff;
    border-radius: 8px;
    z-index: -1;
    opacity: 0;
    transition: 0.2s;
}

/deep/ summary:hover::after {
  opacity: .6;
}

</style>

treeTable.vue

<template>
    <div class="my-custom-tree" id="tree">
        <treeTableItem v-for="(item, idx) in treeData" :item="item" :key="`item_${idx}`"></treeTableItem>
    </div>
</template>

<script>
const treeData = [
    {
        "id": 2,
        "name": "项目1",
        "parentId": 1,
        "fileCount": 14,
        "children": [
            {
                "id": 8,
                "name": "文件夹",
                "parentId": 2,
                "fileCount": 12,
                "children": [
                    {
                        "id": 137,
                        "name": "sdd",
                        "parentId": 8,
                        "fileCount": 0
                    }
                ]
            },
            {
                "id": 221,
                "name": "chrome test",
                "parentId": 2,
                "fileCount": 2
            }
        ]
    },
    {
        "id": 52,
        "name": "项目2",
        "parentId": 1,
        "fileCount": 10,
        "children": [
            {
                "id": 54,
                "name": "文件夹2-1",
                "parentId": 52,
                "fileCount": 10,
                "children": [
                    {
                        "id": 55,
                        "name": "文件夹2-1-1",
                        "parentId": 54,
                        "fileCount": 0,
                        "children": [
                            {
                                "id": 56,
                                "name": "文件夹2-1-1-1",
                                "parentId": 55,
                                "fileCount": 0,
                                "children": [
                                    {
                                        "id": 57,
                                        "name": "文件夹2-1-1-1-1",
                                        "parentId": 56,
                                        "fileCount": 0,
                                        "children": [
                                            {
                                                "id": 58,
                                                "name": "文件夹2-1-1-1-1-1",
                                                "parentId": 57,
                                                "fileCount": 0
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        "id": 53,
        "name": "文件夹1",
        "parentId": 1,
        "fileCount": 12,
        "children": [
            {
                "id": 80,
                "name": "文件夹",
                "parentId": 53,
                "fileCount": 11
            },
            {
                "id": 224,
                "name": "文件夹2",
                "parentId": 53,
                "fileCount": 0
            }
        ]
    },
    {
        "id": 69,
        "name": "项目3",
        "parentId": 1,
        "fileCount": 55,
        "children": [
            {
                "id": 70,
                "name": "文件夹1",
                "parentId": 69,
                "fileCount": 12,
                "children": [
                    {
                        "id": 4,
                        "name": "1",
                        "parentId": 70,
                        "fileCount": 3,
                        "children": [
                            {
                                "id": 51,
                                "name": "文件夹2",
                                "parentId": 4,
                                "fileCount": 1
                            }
                        ]
                    }
                ]
            },
            {
                "id": 91,
                "name": "文件夹",
                "parentId": 69,
                "fileCount": 10
            },
            {
                "id": 102,
                "name": "文件夹",
                "parentId": 69,
                "fileCount": 10
            },
            {
                "id": 113,
                "name": "文件夹",
                "parentId": 69,
                "fileCount": 10
            },
            {
                "id": 121,
                "name": "文件夹的副本",
                "parentId": 69,
                "fileCount": 10
            },
            {
                "id": 136,
                "name": "点点点",
                "parentId": 69,
                "fileCount": 0
            },
            {
                "id": 140,
                "name": "hewei",
                "parentId": 69,
                "fileCount": 3,
                "children": [
                    {
                        "id": 142,
                        "name": "hewei02",
                        "parentId": 140,
                        "fileCount": 1
                    }
                ]
            }
        ]
    }
]

import treeTableItem from './treeTableItem'
export default {
    name: 'tree-table',
    components: {
        treeTableItem,

    },
    mounted() {
    },
    data () {
        return {
            treeData: treeData,
        }
    },
    methods: {
    },
}
</script>

<style lang="scss" scoped>

.my-custom-tree {
    flex: 1;
    overflow: auto;
    padding: 4px 0;
    position: relative;
}

.my-custom-tree{
    /deep/summary {
        outline: 0;
        padding-left: 30px;
        list-style: none;
        background: repeating-linear-gradient(90deg, #999 0 1px, transparent 0px 2px) 0px 50%/20px 1px no-repeat;
        /* background: linear-gradient(#999,#999) 0px 50%/20px 1px no-repeat; */
    }
}

.my-custom-tree{
    /deep/details:last-child {
        background-size: 1px 23px;
    }
}

.my-custom-tree{
    ::v-deep >details:not(:last-child)>details:last-child {
        background-size: 1px 100%;
    }
}

.my-custom-tree {
    /deep/details {
        padding-left: 40px;
        background: repeating-linear-gradient(#999 0 1px, transparent 0px 2px) 40px 0px/1px 100% no-repeat;
        /* background: linear-gradient(#999, #999) 40px 0px/1px 100% no-repeat; */
    }
}

.my-custom-tree{
    ::v-deep >details {
        background: none;
        padding-left: 0;
    }
}

.my-custom-tree{
    ::v-deep >details{
        >summary {
            background: none;
        }
    }
}

.my-custom-tree {
    /deep/summary {
        display: flex;
        align-items: center;
        height: 46px;
        font-size: 15px;
        line-height: 22px;
        color: rgba(0, 0, 0, 0.85);
        cursor: default;
    }
}

.my-custom-tree {
    /deep/summary:not(:only-child)::before {
        content: "";
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        margin-right: 8px;
        border: 1px solid #999;
        background: linear-gradient(#999, #999) 50%/1px 10px no-repeat,
            linear-gradient(#999, #999) 50%/10px 1px no-repeat;
    }
}

.my-custom-tree {
    /deep/details[open]>summary::before {
        background: linear-gradient(#999, #999) 50%/10px 1px no-repeat;
    }
}

</style>

使用：

<treeTable></treeTable>

Answer 1

可以使用这个组件库, 专门做表格的:

https://vxetable.cn/v4/#/table/tree/normal

或者是用站内大佬的:

https://segmentfault.com/a/1190000043966941