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

最新推荐文章于 2025-03-06 17:53:29 发布

m0_62317155

最新推荐文章于 2025-03-06 17:53:29 发布

阅读量1.7k

点赞数 2

文章标签： vue.js 前端 javascript elementui

本文链接：https://blog.youkuaiyun.com/m0_62317155/article/details/129271258

版权

该文章演示了如何在Vue.js应用中利用ElementUI的el-select组件，结合flex布局展示下拉选项中的图片。代码示例展示了如何在每个选项中嵌入图片和文本，提供了一种自定义下拉列表样式的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>