details、summary树形做成vue版本后，hover效果无法显示？

Question

目标效果参考：https://segmentfault.com/a/1190000043966941
改成 vue 版本后，鼠标移动到节点上的显示背景效果怎么也不显示了，哪里的问题？

看不懂例子里面 z-index: -1 是怎么显示的，按照正常逻辑，这个伪类绝对定位切zindex等于-1，不应该被挡住了吗？

treeTableItem.vue

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

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

        }
    },
}
</script>

treeTable.vue

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

<script>

import treeTableItem from './treeTableItem'
export default {
    name: 'tree-table',
    components: {
        treeTableItem,
    },
    mounted() {
        this.$refs.treeWrapper.addEventListener('click', function(ev){
            if (ev.target.tagName === 'SPAN') { 
                ev.preventDefault()
            }
        })

    },
    props: {
        list: {
            type: Array,
            default: () => {
                return []
            }
        },
    },
    data () {
        return {
        }
    },
    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;
    }
}

.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{
    >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: 14px;
        line-height: 22px;
        color: rgba(0, 0, 0, 0.85);
        cursor: default;
    }
}

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

.my-custom-tree {
    /deep/summary:hover::after {
        opacity: 1;
    }
}

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


.my-custom-tree{
    /deep/summary span {
        line-height: 46px;
    }
}

.my-custom-tree {
    /deep/summary::before {
        position: relative;
        z-index: 2;
        cursor: pointer
    }
}

.my-custom-tree {
    /deep/summary span::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 46px;
    }
}

</style>

使用页面代码：

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
                    }
                ]
            }
        ]
    }
]

export default {
    data(){
        return {
            treeDatas: treeDatas
        }
    }
}

<treeTable :list="treeDatas"></treeTable>

Answer 1

我知道了，是背景颜色的影响，把那个z-index:-1去掉，然后那个hover出现::after会覆盖文字，这里用mix-blend-mode来实现文字也可见。注意整个tree加了一个白色背景

https://codepen.io/xboxyan/pen/poqzORW