【CSS + ElementUI】el-tree下拉扩展图标置于右侧

1. 效果图
   

2. 代码实现

<template>
    <div class="search_resource">
        <el-tree class="filter-tree" ref="tree" default-expand-all :data="directoryList" :props="defaultProps"
            icon-class="el-icon-arrow-right" node-key="id" @node-click="handleNodeClick">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span class="tree_title" v-if="node.level == 1">
                    {
   {
    data.name }}
                </span>
                <span class="tree_title" v-else-if="node.level == 2">
                    {
   {
    data.name }}
                </span>
                <div v-else class="tree_son_title">
                    <div class="son_title_area">
                        <span class="ellipse"></span>
                        <span class="son_title">{
   {
    data.name }}</span>
                    </div>
                    <div class="son_num">({
   {
    node.id }})</div>
                </div>
            </span>
        </el-tree>
    </div>
</template>
<script>
export default {
   
    data() {
   
        return {
   
            query: {
   },
            directoryList: [
                {
   
                    id: '1',
                    name: '一级',
                    children: [
                        {
   
                            id: '1-1',
                            name: "一级 1.1"
                        },
                        {
   
                            id: '1-2',
                            name: "一级 1.2"
                        }
                    ]
                },
                {
   
                    id: '2',
                    name: '二级',
                    children: [
                        {
   
                            id: '2-1',
                            name: "二级 2.1",
                            children: [
                                {
   
                                    id: '2-1-1',
                                    name: "二级 2.2.1"
                                },
                                {
   
                                    id: '2-1-2',
                                    name: "二级 2.2.2"
                                }
                            ]
                        },
                        {
   
                            id: '2-2',
                            name: "二级 2.2"
                        }
                    ]
                }
            ],
            defaultProps: {
   
                children: 'children',
                label: 'label'
            }
        }
    },
	mounted(){
   
		this.fetchData()
	}
    methods: {
   
        fetchData() {
   
            // 树
            getTreeList(this.query).then(res=>{
   
            	// this.directoryList = res.data
            })
        },

        //点击tree传id,搜索对应数据
        handleNodeClick(data) {
   
            this.$emit('handClick', data.id)
        }
    }
}
</script>
<style lang="less" scoped>
.search_resource {
   
    padding: 12px 16px 8px 16px;

    .filter-tree /deep/ .el-tree-node__content {
   
        // width: 220px !important; // 树节点内容限制宽度
        height: 32px !important;
    }

    // 让tree 箭头在右边
    .filter-tree /deep/ .el-tree-node__expand-icon {
   
        position: absolute;
        right: -3%;
        font-size: 18px;
    }

    .custom-tree-node {
   
        // 垂直居中
        // display: flex;
        // align-items: center;
        display: inline-block;
        width: 100%;

        .tree_title {
   
            color: #333;
            font-family: "Source Han Sans CN";
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 24px;
        }

        .tree_son_title {
   
            width: 170px; // 此处过长，导致树在展开收缩时宽度轻微的左右浮动；也可以与.el-tree-node__content搭配使用
            display: flex;
            justify-content: space-between;
            align-items: center;

            .son_title_area {
   
                display: flex;
                align-items: center;
                /* 垂直居中 */
                justify-content: center;
                /* 水平居中 */
                text-align: center;
                /* 修复IE11中的bug */
            }

            .ellipse {
   
                display: inline-block;
                width: 5px;
                height: 5px;
                background: #d9d9d9;
                border-radius: 50%;
                margin: 0;
            }

            .son_title {
   
                display: inline-block;
                color: #999;
                font-family: "Source Han Sans CN";
                font-size: 14px;
                font-style: normal;
                font-weight: 350;
                line-height: 24px;
                margin: 0 0 0 3px;
            }

            .son_num {
   
                color: #999;
                font-family: "Source Han Sans CN";
                font-size: 12px;
                font-style: normal;
                font-weight: 300;
                line-height: 24px;
            }
        }
    }
}
</style>

3. 问题
   tree左右轻微移动
   （1）与 overflow-y: auto; 有关
   （2）与 .el-tree-node__content 和 tree_son_title 的 width 有关