本文介绍: 标签的API可以参考上面贴的官方地址,主要是提供一个点击之后在下面附带的弹窗弹窗中,我们设置一个输入框来进行选择值的搜索,下方(即。下拉框多列选择,是在第一种的前端代码删除几行代码就行(把。其他(把icon图表显示删除,非必须)显示标签删去),所以下面着重介绍第一种。部分)用于多列显示我们选择的值。具体代码(复制粘贴即可使用)【代码讲解】首先,肯定是在一个效果展示(多列可以配置)效果展示(多列可以配置)

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

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

原文地址:https://blog.csdn.net/qq_43592352/article/details/130958976

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_23298.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注