效果展示(多列可以配置)

  一、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>