el-select下拉选择框列表展示图片_el 图片选择

作者：繁依Fanyi0 | 2024-04-28 15:25:57
踩
el 图片选择
el-select下拉选择框下拉列表展示图片

图片位置如下所示
在这里插入图片描述
前端代码如下所示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- vue在线引入 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 在线引入echarts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
    <!-- axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                <template>
                    <!-- <div style="display: flex; justify-content: start; align-items: center;">
                        <img :src="item.imgurl" alt="" width="30px" height="30px">
                        <span>{{item.label}}</span>
                    </div> -->
                    <!-- elementui 的flex布局 -->
                    <el-row type="flex"  :gutter="20" justify="center">
                        <el-col :span="4">
                            <img :src="item.imgurl" alt="" width="30px" height="30px">
                        </el-col>
                        <el-col :span="16">
                            <span>{{item.label}}</span>
                        </el-col>
                      </el-row>
                </template>
            </el-option>                        
        </el-select>

        <el-select v-model="value2" placeholder="请选择">
            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                <template>
                     <!-- elementui 的flex布局 -->
                    <el-row type="flex"  :gutter="20" justify="center">
                        <el-col :span="4">
                            <!-- 字体图标可以改变颜色 -->
                            <i :class="item.icons" v-if="item.color" style="color: green"></i>
                            <i :class="item.icons" v-else></i>
                        </el-col>
                        <el-col :span="16">
                            <span>{{item.label}}</span>
                        </el-col>
                      </el-row>
                </template>
            </el-option>                        
        </el-select>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                options: [
                    {
                        value: '1.png',
                        imgurl: './img/1.png',
                        label: '这是第一张图片'
                    },
                    {
                        value: '2.jpg',
                        imgurl: './img/2.jpg',
                        label: '这是第二张图片'
                    },
                    {
                        value: '第三张图片',
                        imgurl: './img/3.jpg',
                        label: '图片三'
                    },
                    {
                        value: '4.jpg',
                        imgurl: './img/4.jpg',
                        label: '图片四'
                    },
                    {
                        value: '5.jpg',
                        imgurl: './img/5.jpg',
                        label: '图片五'
                    }
                ],
                value: '',
                value2: '',
                options2: [
                {
                        value: 'icon1',
                        icons: 'el-icon-platform-eleme',
                        label: 'icon1'
                    },
                    {
                        value: 'icon2',
                        icons: 'el-icon-s-tools',
                        label: 'el-icon-s-tools'
                    },
                    {
                        value: 'icon3',
                        icons: 'el-icon-warning',
                        label: '字体图标',
                        color: 'green'
                    },
                ]
            },
            methods: {

            },
            mounted() {

            }
        })
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
结果如下所示

在这里插入图片描述
data中的数据可以结合代码看一看
在这里插入图片描述
本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】