使用Element-Ui-Plus时,对select-v2进行自定义操作,可以自定义添加筛选后无数据的选项进行添加。

这篇具有很好参考价值的文章主要介绍了使用Element-Ui-Plus时,对select-v2进行自定义操作,可以自定义添加筛选后无数据的选项进行添加。。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题背景:

在最近的开发需求中,需要对element-ui-plus的select-v2的组件进行自定义的改装,即在搜索状态完成后,
如果发现无搜索内容,可进行自定义的进行添加当前的select的input框内。

问题原因:

select-v2提供了一个属性方法,即allow-create的属性, 为了使 allow-create 正常工作,
filterable 的值必须为 true。但是我们发现,使用这个属性后,如果输入的是已经存在的
值,它也会默认进行创建,这不是我们想要的效果。如图所示;
使用Element-Ui-Plus时,对select-v2进行自定义操作,可以自定义添加筛选后无数据的选项进行添加。
通过调查研究发现,可以使用如下的方法进行解决。

解决思路:

使用自定义的空状态的插槽,设置一个添加按钮,监听该按钮,当发现无搜索数据时,点击添加按钮,就把
当前的input的值替换为搜索框输入的值。

代码片段:

html:

                <el-select-v2 ref="selectAppType" >
                    <template #empty>
                        <div :class="[app.e('select-add')]">
                            <span>
                                无搜索结果
                            </span>
                            <el-button @click="selectValAdd" type="primary">
                                添加
                            </el-button>
                        </div>
                    </template>
                </el-select-v2>

js:

import { ref, reactive, toRefs, onMounted } from "vue";
const selectAppType = ref();
//增加自定义下拉框的值
const selectValAdd = () => {
    let eleInput = document.getElementsByClassName("el-select-v2__input-calculator")[0];
    let inputVal = eleInput.innerHTML; //通过绑定dom对象获取所需要的input的值
    console.log(inputVal)  //输出获取的input的值,该步可以对所需的赋值的对象进行赋值
    selectAppType.value.expanded = false;  //关闭下拉框
}

实现效果:

使用Element-Ui-Plus时,对select-v2进行自定义操作,可以自定义添加筛选后无数据的选项进行添加。文章来源地址https://www.toymoban.com/news/detail-513089.html

到了这里,关于使用Element-Ui-Plus时,对select-v2进行自定义操作,可以自定义添加筛选后无数据的选项进行添加。的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue】Element Plus和Element UI中插槽使用

    今天和大家讲一下Element Plus和Element UI这两个组件库中表格的插槽使用方法,一般情况下vue2使用Element UI这个组件库,表格组件的插槽的话一般都是使用v-slot,而vue3使用Element Plus组件库,表格组件中插槽一般为#default,下面就来讲一下这两个。 Element Plus 和 Element UI 都是基于

    2024年02月12日
    浏览(39)
  • 使用element-ui el-select 做下拉 全选+搜索 功能

    使用element-ui el-select 做下拉 全选+搜索 功能 有时候,需要用到下拉列表 全选和搜索,并且鼠标放入的时候有下拉列表展示。以前的做法是 check + el-input搜索结合做个组件,现在这个方法直接使用el-select 就能做到这个需求功能:有搜索+有全选+有取消+有确认请求+有鼠标移入自

    2024年02月11日
    浏览(57)
  • 猫头虎分享:Element UI & Element Plus组件的安装及使用

    博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能! 专栏链接 : 🔗 精选专栏 : 《面试题大全》 — 面试准备的宝典! 《IDEA开发秘籍》 — 提升你的IDEA技能! 《100天精通鸿蒙》 — 从Web/安卓到鸿蒙大师! 《100天精通Golang(基础入门篇)》 — 踏入

    2024年03月10日
    浏览(71)
  • 最简单的使用css修改element-ui的el-select的高度

    个人博客同步csdn 首先给el-select的容器上面自定义一个类名,避免污染别的el-select 写css,注意这里用了less 效果图(前) 效果图(后)

    2024年02月12日
    浏览(39)
  • vue3使用Element ui plus中MessageBox消息框+radio框配合使用

    想要达到的效果 首先安装element ui plus 省略~~ 官网地址: https://element-plus.gitee.io/zh-CN/component/message-box.html https://element-plus.gitee.io/zh-CN/component/message-box.html 需要用到的 引入

    2024年01月16日
    浏览(41)
  • Vue使用element-ui/plus组件布局容器container失效解决方法

    这个错我遇到了好几次,每一次都花了很长时间解决,还是决定写个笔记记录一下。 在使用elementu官网的布局容器时,他是这样的。 我在确定elementui引入正确的情况下是这样写的。 注意,我在SideNav,Header,Main,Footer组件套了el-aside,el-header... 然后暴露出来在Home中引用。 当然错

    2024年02月11日
    浏览(47)
  • vue3 element plus table selection展示数据,默认选中功能

    当打开表格数据时,可能会根据后台返回的数据,默认选中符合条件的行 这样我们就用到了el-table-column,设 type 属性为 selection 1.表格的第一行,设置为: 2.table上定义ref属性,并且定义这个变量 3.在事件中配置一下 //修改选中的行,重新赋值 //结果 注意:支持树形结构

    2024年02月11日
    浏览(47)
  • 解决Element Plus中Select在El Dialog里层级过低的问题(修改select选项框样式)

    Element Plus是Vue.js的一套基于Element UI的组件库,提供了丰富的组件用于构建现代化的Web应用程序。其中, el-select 是一个常用的下拉选择器组件,但在某些情况下,当 el-select 组件嵌套在 el-dialog (对话框)组件中时,可能会出现层级过低的问题。本文将介绍如何使用 popper-cla

    2024年02月14日
    浏览(41)
  • Element-Plus select选择器-下拉组件错位bug(有高度滚动时)

    由于项目不便展示,因此在官网复现bug https://element-plus.org/zh-CN/component/select.html#基础用法 源码调试时发现下拉菜单是直接放在body 元素里,这时候希望它不要直接放在body里, 查阅文档看到这两个属性: 但是添加了上面的属性后,出现了新的问题,要么是不生效,要么是下拉

    2024年02月12日
    浏览(32)
  • vue使用element-ui或者element-plus固定 el-header 和 el-aside

    vue使用element-ui或者element-plus固定 el-header 和 el-aside 在使用element-plus做后台管理的时候,需要固定el-header和el-aside,特此记录以下。 只需要将el-main固定高度即可。 main.vue css 将 el-main 高度后,当 el-main 内容超出固定高度后就能显示滚轮了。将滚轮样式修改一下就好了。 效果:

    2024年02月13日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包