elementUI中＜el-select＞下拉框选项过多的页面优化方案——多列选择

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

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