ElementUI (V2)

Select 选择器

:label绑定的是页面需要的名称，:value绑定不显示的（一般绑定主键id或能显示唯一值）

ElementPlus (V3)

Radio单选框

两种写法
都可以实现单选按钮，只不过第二种更能动态显示，只不过需要根据后端所获得的value值进行选中

<el-radio-group v-model="radio1" >
  <el-radio label="1">男</el-radio>
  <el-radio label="2">女</el-radio>
</el-radio-group>

//推荐：
<el-radio-group v-model="radio1" >
  <el-radio label="男"></el-radio>
  <el-radio label="女"></el-radio>
</el-radio-group>

Tree树形控件

已实现功能

• 自定义内容
• 删除顶级左侧icon图标

易错问题解决

elementui 修改组件样式无效问题

Element-ui-Tree组件无法出现横向滚动条

自定义内容

主要代码

<script setup lang="ts">
import { onMounted } from 'vue';

interface Tree {
    id: string,
    label: string
    children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
    console.log(data)
}

const data: Tree[] = [
    {
        id: 'ashdkashd',
        label: 'Level one 1',
        children: [
            {
                id: 'asdasd',
                label: 'Level two 1-1',
                children: [
                    {
                        id: 'asdasd',
                        label: 'Level three 1-1-1',
                    },
                ],
            },
        ],
    }
]

const defaultProps = {
    children: 'children',
    label: 'label',
    isLeaf: 'isLeaf',
    id: 'id'
}

onMounted(() => {
    updateclass()
})
</script>

<template>
    <div>
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
            <template v-slot="{ node, data }">
                <div v-if="node.level === 1" class="levelone equalclass">
                    <div>
                        <img alt="" src="src/images/父级.svg" style="width: 20px;height: 20px;">
                    </div>
                    <div style="">
                        {{ node.label }}
                    </div>
                </div>
                <div v-if="node.level === 2" class="equalclass" style="display: flex">
                    <div><img alt="" src="src/images/页签.svg" style="width: 20px;height: 20px;"></div>
                    <div>{{ node.label }}</div>
                </div>
                <div v-if="node.level === 3" class="equalclass" style="display: flex">
                    <div><img alt="" src="src/images/父级.svg" style="width: 20px;height: 20px;"></div>
                    <div><span>{{ node.label }} </span></div>
                </div>
            </template>
        </el-tree>
    </div>
</template>

<style scoped>
.levelone {
    margin-left: 15px;
    font-size: 18px !important;
}

.equalclass {
    display: flex;
    align-items: center;
    font-size: 18px;
}

.el-tree {
    min-width: 100%;
    display: inline-block !important;
}

.el-tree-node>.el-tree-node__children {
    overflow: visible;
}
</style>

删除顶级左侧icon图标

核心代码

<script setup lang="ts">
import { onMounted } from 'vue';

interface Tree {
    id: string,
    label: string
    children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
    console.log(data)
}

const data: Tree[] = [
    {
        id: 'ashdkashd',
        label: 'Level one 1',
        children: [
            {
                id: 'asdasd',
                label: 'Level two 1-1',
                children: [
                    {
                        id: 'asdasd',
                        label: 'Level three 1-1-1',
                    },
                ],
            },
        ],
    }
]

const defaultProps = {
    children: 'children',
    label: 'label',
    isLeaf: 'isLeaf',
    id: 'id'
}

//关键代码
const updateclass = () => {
    const targetElement = document.querySelectorAll('.levelone');
    // targetElement.parentNode.querySelector('i').remove();
    // console.log(siblingElements);
    targetElement.forEach(element => {
        element.parentNode?.querySelector('i')?.remove();
    });
}

onMounted(() => {
    updateclass()
})
</script>

<template>
    <div>
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
            <template v-slot="{ node, data }">
                <div v-if="node.level === 1" class="levelone equalclass">
                    <div>
                        <img alt="" src="src/images/父级.svg" style="width: 20px;height: 20px;">
                    </div>
                    <div style="">
                        {{ node.label }}
                    </div>
                </div>
                <div v-if="node.level === 2" class="equalclass" style="display: flex">
                    <div><img alt="" src="src/images/页签.svg" style="width: 20px;height: 20px;"></div>
                    <div>{{ node.label }}</div>
                </div>
                <div v-if="node.level === 3" class="equalclass" style="display: flex">
                    <div><img alt="" src="src/images/父级.svg" style="width: 20px;height: 20px;"></div>
                    <div><span>{{ node.label }} </span></div>
                </div>
            </template>
        </el-tree>
    </div>
</template>

<style scoped>
.levelone {
    margin-left: 15px;
    font-size: 18px !important;
}

.equalclass {
    display: flex;
    align-items: center;
    font-size: 18px;
}

.el-tree {
    min-width: 100%;
    display: inline-block !important;
}

.el-tree-node>.el-tree-node__children {
    overflow: visible;
}
</style>