本文介绍: 标签的API可以参考上面贴的官方地址,主要是提供一个点击之后在下面附带的弹窗;弹窗中,我们设置一个输入框来进行选择值的搜索,下方(即。下拉框的多列选择,是在第一种的前端代码上删除几行代码就行(把。其他(把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进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。