Page optimization scheme with too many options in the <el-select> drop-down box in elementUI - multi-column selection

Effect display (multiple columns can be configured)

  1. iconMulti-column selection of the drop-down box:

  2. Multi-column selection of conventional and general drop-down boxes:

[Note] The second type of multi-column selection of the conventional and general drop-down box is to delete a few lines of code on the front-end code of the first type (delete the icondisplay label), so the following focuses on the iconmulti-column selection of the first type of drop-down box choose.

train of thought

  Don't use the dropdown label <el-option>to do it, use the elementUIprovided popoverpopup to do it.

  popoverPopover official document and demo address: https://element.eleme.cn/#/zh-CN/component/popover#events .

Specific code (copy and paste to use)

   1. HTML code:

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

[Code Explanation] First of all, it must be done in a form item <el-form>below ; the API of the label can refer to the official address posted above, mainly to provide a pop-up window attached below after clicking; in the pop-up window, we set a The input box is used to search for the selected value, and the bottom (ie part) is used to display the values ​​we want to select in multiple columns.<el-form-item><el-popover><div class="icon-list">

  Two, vue code:

	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 = '';
            }
        }
    })

  Three, css code:

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

Others (delete the icon chart display, not necessary)

  Just delete htmlthe relevant ones in the code icon, and the others don’t need to be moved. The code after deletion is as follows:

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