vue3+elementPlus：el-select选择器里添加按钮button

原创已于 2023-10-08 14:44:40 修改 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui #前端 #ecmascript

于 2023-10-08 14:26:13 首次发布

本文介绍了如何在Vue3结合ElementPlus框架中，实现在el-select选择器中添加按钮并实现动态样式，包括多选选项和使用样式绑定功能的应用。

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

vue3+elementPlus：el-select选择器里添加按钮button，在el-select的option后面添加button

//html
<el-select class="selectIcon" value-key="id" v-model="store.state.HeaderfilterText" multiple collapse-tags
                    collapse-tags-tooltip placeholder="默认企业" style="width: 210px" @remove-tag="removeCheckTag"
                    @change="checkChange" >
                    <template #prefix>
                        <el-icon class="el-icon--left">
                            <svg viewBox="0 0 1024 1024" data-v-029747aa="">
                                <path fill="currentColor" d="M512 128 128 447.936V896h255.936V640H640v256h255.936V447.936z">
                                </path>
                            </svg>
                        </el-icon>
                    </template>
                    <el-option v-for="item in store.state.HeaderLists" :key="item.id" :label="item.companyName"
                   :value="item" @click.native="changeGateway(item)" >                    
                    </el-option>
                    <el-divider border-style="dashed" />
                    <el-button style="float:right;margin: -26px 0px 0 0;" @click="getGateway">确定</el-button>
                </el-select>

上一篇文章，

vue3+elementPlus：element 面板的切换盒子的动态样式_意初的博客-优快云博客vue3+elementPlus：element 面板的切换盒子的动态样式。style动态绑定一个函数，element 面板盒子样式，使用原生dom样式修改法https://blog.youkuaiyun.com/weixin_43928112/article/details/133680984