【关于Element UI中el-autocomplete组件】一、el-autocomplete组件添加底部固定按钮
小伙伴们,不知道大家再开发过程中使用el-autocomplete时候会不会遇到需要在下拉建议值中加入自定义按钮,例如添加按钮之类的,如图:
那么这个按钮是如何加上去的呢?
首先我们在这个建议值列表中设置一个字段is_add如果这个字段为true那么就可以让他显示出来,
话不多说上代码:
首先是组件的使用:
<el-autocompleteclass="voucher-subject-input":ref="'inputcredit_2_'+index":popper-append-to-body="false":class="{ 'subject-opacity': voucher.items[index].showText }"v-model="voucher.items[index].subjectName"value-key="name":fetch-suggestions="querySearch":highlight-first-item="true"@select="handleSelectSubject($event,index)"@focus="handleFocusSubject($event,index)"><!-- 下一篇小编为大家带来这里使用:popper-append-to-body="false"时候,又要监听@blur与@select事件会发生什么,该怎么解决 --><template slot-scope="{ item }"><el-buttonv-if="item.is_add"type="primary" plainstyle="width: 100%;position: absolute;bottom: 0px;left: 0px;"class="add-button"@click="accAddBtn()">添加</el-button></template>
</el-autocomplete>
vue部分(在methods中使用如下方法):
//会计科目返回查询结果
querySearch(queryString, cb) {// console.log("会计科目返回查询结果",results)var restaurants = this.selectArrObj.SubjectsList;var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;results = results.length > 0 ? results : [{name: '没有匹配项'}]//这里给列表中的每串数据都加上is_add:false控制组件部分的按钮显示for (let i = 0;i<results.length;i++){results[i].is_add = false}//注意的是这里要加上name,因为我是根据name模糊查询的,不然会报错,导致不可用results.push({name:'',is_add:true});// 调用 callback 返回建议列表的数据cb(results);
},
//会计科目查询(模糊查询)
createFilter(queryString) {return (restaurant) => {return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);};},
这就是把按钮添加到el-autocomplete组件建议值下拉列表的大致部分,
那么,这里小编先带大家了解一下为什么这里要使用:popper-append-to-body=“false”,我们看文档可以看到
如果使用默认的true,查看dom结构发现是因为下拉列表的class是插入至body下的,而不是vue app 下。所以我们使用深度选择器是没办法控制他的css样式的。
因此这里我们要使用false,让他在vue app下。然后在css中我们就可以使用深度选择器,调整下拉框的底部内边距,使按钮能够置于最底下不会挡到选项。
<style scoped>/deep/ .el-scrollbar__wrap{margin-bottom: 30px;overflow-x: hidden;}/deep/ .el-autocomplete-suggestion__list{padding-bottom: 50px;}
</style>
你们猜猜小编来使用:popper-append-to-body="false"后小编会遇到什么坑呢?
下一篇为你们揭晓。
好了,快试试小编的这个方法在你那能不能行得通吧~如果你有什么更好的解决方法记得跟小编分享哦
【关于Element UI中el-autocomplete组件】一、el-autocomplete组件添加底部固定按钮相关推荐
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
- 修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
- Element Ui 中的 :visible.sync
若依后台管理[前端] 若依的前端基于饿了么(Element UI)进行开发,其中用到的组件也是非常之多的,如果没有仔细的看过和深入的了解Element UI 那么开发时就会相对的遇到一些问题(说的就是 ...
- Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
- Web前端笔记-修改element ui中表格样式(透明、去横纵线等含修改思路)
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
- element ui 中 el-checkbox-group 点击一个全部选中的问题
element ui 中 el-checkbox-group 点击一个全部选中的问题 原因是:checkbox-group中的v-modle要单独一个数组对象,不能作为表单对象,ruleForm中的一 ...
- Element UI中Steps 步骤条description描述换行展示
突然要求加了个显示字段,之前的代码只能显示一行,于是乎找到了解决办法,代码如下:其中的属性自行到官网查看释义吧:Element UI官网传送门 <el-table><!-- 可展开的 ...
- element ui中的el-dropdown(下拉框)防止点一下就隐藏的问题
element ui中的el-dropdown(下拉框)防止点一下就影藏的问题 当使用el-dropdown下拉框时,下拉框的每项中,可能需要加入@click.@change或复选框等事件,而el-d ...
最新文章
- python functools.reduce_Python-functools模块(reduce、partial、lru_cache)
- python字符串find函数-Python内置的字符串处理函数整理
- 分布式SESSION一致性
- 奖励名单表格模板_“我用一套表格,解决了孩子的拖延症,一路用到小学高年级!”...
- 『004』索引-Python
- Python 的一个脚本错误可能会废掉 150 多个项目!
- SQL Server中的事务日志管理(6/9):大容量日志恢复模式里的日志管理
- spring中注解及原理
- python外包凹多边形生成_用Opencv python裁剪图像中的凹多边形
- 低通滤波器转带通滤波器公式由来_什么是低通滤波器
- 爬虫基础之动态网页数据抓取(下)
- ESP32-C3 SPI salve示例错误
- PE安装Win8纯净版教程【附Win864/32位系统下载地址以及系统激活工具和解压软件安装包】
- android 9.0rom下载,安卓9.0刷机包
- 华中科技大学省[you]选[ji]
- 傻博士----物理层
- 编程开发学习笔记之程序员如何用1年时间获得3年成长(图)
- unity使用MMD4Mecanim模型到Android中
- 使用nodejs爬取和讯网高管增减持数据
- 嫁给程序员原来还有这福利,难怪有些女孩子找对象专门找程序员