下拉框问题(vue+elementui+typescript)

最新推荐文章于 2024-05-29 17:50:51 发布
最新推荐文章于 2024-05-29 17:50:51 发布
阅读量750 收藏
点赞数
文章标签： vue.js typescript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41943654/article/details/120988658
版权
本文主要介绍了在Vue项目中使用ElementUI组件库时遇到的两个下拉框问题：如何处理下拉框不固定的问题，以及如何设置下拉框的默认值。针对下拉框不固定，可以通过设置`popper-append-to-body`属性为`false`来解决。对于默认值显示，可以利用v-model进行绑定，通过接口获取的enumValue值设置初始值。
摘要由CSDN通过智能技术生成

1.下拉框不固定的问题

popper-append-to-body：是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false

<el-select  :popper-append-to-body='false' ></el-select>

2.下拉框默认值显示

v-model 绑定的值为默认显示的值
在这里插入图片描述

<el<
最低0.47元/天 解锁文章
学前端的皮卡丘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-component-select:typescript+vue开发的下拉框选择组件，简单易用
04-27
vue select下拉框选择组件typescript+vue开发的下拉框选择组件，使用模拟的增强下拉选择器来代替浏览器原生的选择器，简单易用代码示例使用v-model来进行数据双向绑定，控制组件的显示与隐藏，详情看以下代码安装...
vue3-mindmap:开发中
04-09
目前打算对项目进行重构，解决一些老旧问题（图片生成、加载慢...） 在线演示： 安装 npm install vue3-mindmap PROPS Name Type Default Description v-model Data[] undefined 设置思维导图数据 x-gap Number 50 ...
(Select)解决：Element-ui 中的 Select 组件用(深度)选择器修改默认样式不生效的问题及如何使用 popper-append-to-body=“false“ 属性
狮子座的男孩
05-05 9873
1、存在修改默认样式不生效问题的展示： A、问题一：虽然通过深度选择器修改了下拉框的背景等样式问题却没有展示： B、问题二：渲染后的 dom 元素并不在 #app 元素内部： // 发现：修改下拉框默认属性而渲染的 dom 元素是与 #app 并列位于 body 中的，因此是没有办法通过深度选择器来定位该元素的； 2、用(深度)选择器设置属性不生效的原因： A、原因一：select-popper 元素渲染后会脱离 #app; 发现渲染后的 dom 元素不在 #app 元素内部, 应该是 el-selec
关于element ui select，date-picker添加:popper-append-to-body=“false“后，下拉框下拉方向不会自动调整的问题
weixin_46543056的博客
07-13 2931
关于element ui select，date-picker添加:popper-append-to-body="false"后，下拉框下拉方向不会自动调整的问题
使用el-select的时候，下拉框滚动弹框消失
最新发布
lsn690607887的博客
05-29 328
在使用el-select的时候，经常遇见下拉框里要放多个值，比如：文字描述（统计） 例：人数（100），然后文字描述超出隐藏，所有我们就会在el-select内部加入东西。解决方案就是将el-option内部的div去掉换成span，具体因为啥，我没有细细研究，可能是elementui的版本BUG。看着毫无问题，但是当下拉框出现时，无法进行滚动，滚动下拉框就消失。
Vue3+TypeScript+Bootstrap 封装自己的下拉框组件
qq_59181609的博客
04-22 582
难点：点击下拉框以外的地方关闭下拉框 思路总结： 1.获取下拉框的DOM元素。 2.写一个回调函数，获取当前点击的DOM元素。 3.通过 contains 方法，判断当前点击的DOM元素是否在下拉框DOM元素内来决定是否显示和隐藏下拉框。 <template> <div class="dropdown" ref="dropdownRef"> <a class="btn btn-outline-light my-2 dropdown-toggl
ElementUI-vue修改下拉框的默认样式
weixin_49518866的博客
11-12 3207
ElementUI-vue修改下拉框的默认样式 如下图： 通过Dom元素可以发现，官方Select选择器下拉框是直接插入body标签中，与最外级div同级，所以在Vue中无论怎么写css都无法覆盖到下拉框样式。 仔细找了一下elementUI的官方文档，在这里要给select标签增加 :popper-append-to-body=“false” 属性 接下来的css设置就在浏览器里右击下拉框，先在浏览器里写入你需要改的样式，接下来复制到编辑器里就行。 可能只是单页面修改下拉框的样式，所以这里我用到
el-select下拉框或搜索结果（el-option）偏移的解决方法
树上骑个猴的博客
01-15 8961
/deep/ el-select-dropdown el-popper { position: absolute !important; top: 30px !important; left: 0px !important; }
关于element UI 中使用下拉弹出框之类的组件容易出现弹出框会位移
LowVoice的博客
11-05 2095
在项目中发现的一个bug就是在使用element UI的下拉组件的时候，点击选项下拉后页面滚动。会出现弹框位置固定了。 然后在组件api中发现一项解决了问题。 只需要在el-select标签中加入**:popper-append-to-body=“false”**这个属性，记住前面有“：”哟。 然后发现element 其他的弹框组件也有类似的问题但是加上**:popper-append-to-body="false"这个属性没生效。 后来发现可以加入:append-to-body=“false”**这个
顶部下拉框输入框组件封装
04-27
总结来说，"顶部下拉框输入框组件封装"项目集成了Vue.js的组件化思想，Webpack的模块打包能力，JavaScript的动态特性，以及可能的TypeScript类型检查，通过这些技术实现了可跨环境使用的前端组件。对于开发者而言，...
基于 Vue3、Vite、Ant-Design-Vue大数据开发案例
04-11
基于 Vue3、Vite、Ant-Design-Vue、TypeScript、Vue Vben Admin，最先进的技术栈，让初学者能够更快的入门并投入到团队开发中去。包括模块如：组织机构、角色用户、菜单授权、数据权限、系统参数等。强大的组件封装...
下拉框可输入模糊查询，自动匹配
06-04
在IT行业中，尤其是在前端开发领域，下拉框（Select）是一种常见的用户界面元素，用于提供一组预设选项供用户选择。然而，随着用户体验需求的提升，传统的静态下拉框已经不能满足所有场景，因此出现了“下拉框可输入...
【elementUI样式】模态框中的el-select下拉框不跟随页面滚动问题
前端代码小白的日常博客
11-29 4089
popper-append-to-body 属性是 Element-ui 官方文档中提供的一个属性，该属性的用途: 就是将 el-select 选项的内容移动 div#app 当中，默认值是 true;当页面滚动的时候，el-select的内容跟随页面移动，不是跟随el-select下面的input进行移动，想要实现的效果如下图。important 为所有样式的最高级，可以通过外联的样式来个更改el-select本身自带的样式。模态框中的el-select下拉框不跟随页面滚动问题。
vue+elementUi+selsct+option之下拉菜单最后一项显示不全、问题、deep、less、sass、scss
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
06-08 2175
vue+elementUi+selsct+option之下拉菜单最后一项显示不全、问题、deep、less、sass、scss
Vue 当页面进入全屏状态时element-ui的el-select下拉菜单不显示问题
weixin_64482155的博客
12-13 6169
这应该也是不将弹出框插入至 body 元素之中的原因，所以就给el-select写个状态：全屏时popper-append-to-body为false,非全屏时为true。但在写完之后，发现还是不行，甚至又回到了没加popper-append-to-body的情况（全屏不显示下拉菜单）。在前两天进行页面全屏时，一切都还好好的，可当使用element-ui中的el-select时，下拉菜单却怎么也显示不出来，但只要退出全屏状态，立马就好。可随之而来新的问题产生，非全屏状态下，我的下拉菜单无法完全显示出来了！
Elementui el-autocomplete下拉框自适应宽度
WGYHAPPY的博客
06-23 4596
<el-autocomplete v-model='challengeId' popper-class="el-autocomplete-suggestion" :popper-append-to-body="false":fetch-suggestions="querySearchItem" @select="handleSelect"></el-autocomplete> <style scoped> /deep/ .el-autocomplete-sugges.
element 下拉框不显示下拉数据的问题
Mattscl的博客
12-05 3978
解决方法:添加:popper-append-to-body="false"属性 如： <el-form-item label="活动区域"> <el-select v-model="form.region" :popper-append-to-body="false" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"><
element 中添加一个属性就可解决 el-select 和 el-cascader 等下拉项 不随页面滚动问题
IT_iosers的博客
06-27 1383
element 中添加一个属性就可解决 el-select 和 el-cascader 等下拉项 不随页面滚动问题
遇到el-select选项被遮挡问题？这篇文章告诉你如何解决
热门推荐
Shids_的博客
02-23 1万+
遇到el-select选项被遮挡问题？这篇文章告诉你如何解决
vue3+ts的下拉框监听
04-08
事件应该怎么写？ 您可以使用 Vue3 的 Composition API 来监听下拉框的事件，具体实现步骤如下： 1. 在 setup 函数中定义数据和方法，包括下拉框的选中值和监听事件的方法。 2. 在模板中使用 v-model 指令绑定下拉框的选中值，并使用 @change 指令绑定监听事件的方法。 示例代码如下： ```typescript <template> <select v-model="selectedValue" @change="handleSelectChange"> <option value="value1">选项1</option> <option value="value2">选项2</option> <option value="value3">选项3</option> </select> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const selectedValue = ref<string>('value1'); const handleSelectChange = (event: Event) => { // 处理下拉框选中值的改变 console.log(selectedValue.value); }; return { selectedValue, handleSelectChange, }; }, }); </script> ``` 希望对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值