效果展示(多列可以配置)
一、icon下拉框的多列选择：
二、常规、通用下拉框的多列选择：
【注】第二种常规、通用下拉框的多列选择，是在第一种的前端代码上删除几行代码就行（把icon显示标签删去），所以下面着重介绍第一种icon下拉框的多列选择。
思路
不使用下拉框标签<el-option>来做，使用elementUI提供的popover弹窗来做。
popover弹窗官方文档以及演示地址：https://element.eleme.cn/#/zh-CN/component/popover#events。
具体代码（复制粘贴即可使用）
一、html代码：
<el-form-item label="icon" prop="icon"> <el-popover placement="bottom-start" width="460" trigger="click" @show="resetIconName()" > <div class="icon-body"> <el-input v-model="icon_name" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input.native="filterIcons"> <i slot="suffix" class="el-icon-search el-input__icon" ></i> </el-input> <div class="icon-list"> <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)"> <i :class="item" style="height: 30px;width: 16px;" ></i> <span>{{ item }}</span> </div> </div> </div> <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly> <i v-if="form.icon" slot="prefix" :class="form.icon" style="height: 32px;width: 16px;"></i> <i v-else slot="prefix" class="el-icon-search" style="height: 32px;width: 16px;" ></i> </el-input> </el-popover> </el-form-item>
【代码讲解】首先，肯定是在一个<el-form>下的<el-form-item>里面的表单项做的；<el-popover>标签的API可以参考上面贴的官方地址，主要是提供一个点击之后在下面附带的弹窗；弹窗中，我们设置一个输入框来进行选择值的搜索，下方(即<div class="icon-list">部分)用于多列显示我们想选择的值。
二、vue代码：
new Vue({ data: { // 表单: 收集`新增和修改弹窗`的表单数据 form: { "icon": '' }, // icon的搜索关键字 icon_name:'', // 可选icon列表 icons: ["el-icon-platform-eleme","el-icon-eleme","el-icon-delete-solid","el-icon-delete","el-icon-s-tools"], // 用于在页面显示的icon列表 iconList: [] }, mounted: function () { //自动触发写入的函数 this.iconList = this.icons; }, methods: { /** 过滤搜索icon */ filterIcons() { this.iconList = this.icons; if (this.icon_name) { this.iconList = this.iconList.filter(item => item.includes(this.icon_name)) } }, /** 选中icon */ selectedIcon(name) { this.form.icon = name; document.body.click() }, /** 重置搜索icon的关键值 */ resetIconName(){ this.icon_name = ''; } } })
三、css代码：
<style rel="stylesheet/scss" > .icon-body { width: 100%; padding: 10px; } .icon-body .icon-list { height: 200px; overflow-y: scroll; } .icon-body .icon-list div { height: 30px; line-height: 30px; margin-bottom: -5px; cursor: pointer; // 这里是控制显示几列的地方 3列就是 1/3 = 33% width: 49%; float: left; } .icon-body .icon-list span { fill: currentColor; overflow: hidden; } </style>
其他（把icon图表显示删除，非必须）
删除html代码里面有关icon的就行，其他不用动，删除后代码如下：
<el-form-item label="icon" prop="icon"> <el-popover placement="bottom-start" width="460" trigger="click" @show="resetIconName()" > <div class="icon-body"> <el-input v-model="icon_name" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input.native="filterIcons"> </el-input> <div class="icon-list"> <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)"> <span>{{ item }}</span> </div> </div> </div> <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly> </el-input> </el-popover> </el-form-item>
