element select嵌套tree，focus后下拉框默认滑动到底部原因

最新推荐文章于 2024-07-29 13:28:03 发布
最新推荐文章于 2024-07-29 13:28:03 发布
阅读量512 收藏
点赞数 3
文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbb_mh/article/details/136739589
版权
文章讨论了在Vue应用中，el-select组件下拉列表每次展开时会滑动到底部的问题，原因是第一个el-option的value未赋值。解决办法是为第一个option提供一个默认值。
摘要由CSDN通过智能技术生成

如标题所述的代码：

<el-select v-model="value" placeholder="请选择">

        <el-option @click.stop value='' label=''>

                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

        </el-option>

        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">         </el-option>

</el-select>

每次下拉数据打开滑动到底部的原因：第一个el-option的value没有赋值

解决办法：<el-option @click.stop value='...' label='...'>

lbb_mh
关注
elementUI，实现el-select + el-tree组合成下拉树。
weixin_38395200的博客
05-20 5061
elementUI 官网API elementUI 中有Select 选择器，效果是这样的。 Tree 树形控件的效果是这样的。 我们在实际开发中需要用到下拉树，elementUI 是没有这个组件的，我们就要自己去写了。下面是我开发中用到的，记录一下el-select + el-tree组合，直接贴代码。 <el-select v-model="baseTableName" class="select-unitName select-option-father" popper-class="se
elementUI实现el-select嵌套el-tree
weixin_44537264的博客
09-28 722
html部分 <el-form-item label="树型结构"> <el-select v-model="treeData" placeholder="请选择..." ref="mySelect" > <el-option :value="treeDataValue" style="height: auto" > <el-tree ref="tree"
el-select内容滚动到最底部
weixin_39298705的博客
01-12 709
【代码】el-select内容滚动到最底部。
el-tree一键点击控制树形展开折叠
JiAyInNnNnN123的博客
07-29 544
当前需求：点击按钮，控制el-tree中的树形数据，展开or折叠。
element-ui中el-select和el-tree结合使用，没值回显时，滚动条位置总在底部
m0_52775179的博客
04-28 452
officeTreeData: [], // 业务部门tree数据。editCheckCode: '',//选择的id。//el-options是关键。总结： 添加value属性是关键。
关于elementUI的select-tree组合下拉框，选择后下拉框不收起
weixin_44847425的博客
12-13 6234
在项目中会有这种需要select和tree一起搭配成的树形下拉框，但是会有如图的问题，点击了一个选项之后，下拉框并没有收起来。 样式书写 <el-form-item label="上级部门：" prop="pid"> <el-select ref="treeSelect" v-model="form.department_value" placeholder="请选择" clearable> <el-option value=""></el-option&g.
ant-design Select 选择器 滚动 bug
weixin_46452908的博客
11-21 571
ant-design Select 选择器 滚动 bug
el-tree 滚动条滚动到指定位置
m0_50809284的博客
01-09 1404
左侧树结构，右侧树结构详情内容。点击左侧内容，右侧滚动到对应的位置。
iview实现select tree树形下拉框的示例代码
01-19
本文介绍了iview实现select tree树形下拉框的示例代码，分享给大家，具体如下： html部分 <Tree data=treeData ref=tree render=renderContent></Tree> 数据部分 export const treeData= [ { title: 'parent 1...
select获取下拉框的值 下拉框默认选中方法
08-27
select获取下拉框的值和默认选中方法 select标签是HTML中常用的选择控件，用于让用户从多个选项中选择一个或多个选项。在实际开发中，我们经常需要获取select标签的值或将其默认选中某个选项本文将详细介绍select...
在element-ui的select下拉框加上滚动加载
10-17
Element-UI的`<el-select>`组件提供了一个方便的方式来选择数据，但默认情况下，当数据量过大时，一次性加载所有选项可能会导致页面性能下降。为了解决这个问题，我们可以实现一个滚动加载功能，即在用户滚动到...
Vue中用element-ui封装的el-tree和el-select实现下拉树状多选单选，灵活自定义模糊查询、单选多选，默认选中值。
imapig_的博客
04-28 4934
这里写目录标题一.实现效果1.多选样式2.单选样式二.组件代码三.引入方法 一.实现效果 1.多选样式 2.单选样式 二.组件代码 文件路径：pages/publicComp/selectTree <template> <div> <el-popover popper-class="selectTree" v-clickoutside="replyOutside" placement="bottom-start"
Vue中用element-ui封装的el-tree和el-select实现下拉树状多选，灵活自定义模糊查询、单选多选，默认选中值。
m0_49515138的博客
09-14 1778
<el-select v-model="selectAjlbMc" class="ajlbselect" ref="checkCaseType" :clearable="true" :multiple="true" placeholder="请选择" style="width:100%;" @clear="clearSelect" @remove-tag="clearSelect"> <el-input .
vue el-select下拉框中嵌套树结构
qq_44699269的博客
02-23 802
js部分如下：（直接调接口了）
el-Select 选择器 底部固定
weixin_46535287的博客
08-02 2007
select 底部固定点击 滚动条直接到底部 展示input输入框 ，因为设计输入框是在select里面所以这样写要是输入框放在外面可能需要在js里继续写样式感兴趣的朋友可以尝试一下。需求select底部固定点击滚动条直接到底部展示input输入框。基本的引用element就不写了直接写重点。到这里基本结束了有问题留言。...
element-ui中el-scrollbar 滚动到底部
weixin_45041493的博客
02-26 2290
控制el-scrollbar内滚动条的方法与控制页面的滚动条的方法基本一样，只是获取el-scrollbar节点的滚动条时，需使用 refs.scrollMenuRef.wrap。
el-tree 设置全部展开/设置默认展开某一层
m0_75278118的博客
08-02 8506
el-tree 设置全部展开/设置默认展开某一层
el-tree 滚动条自动定位
菜鸟学编程
08-26 1970
el-tree 滚动条自动定位到当前选中节点
element 下拉框内容清空后，下拉框内容没有回复默认查询所有数据
最新发布
09-21
当element UI组件中的下拉框（el-select）内容清空后，即用户手动删除了所有选项，或者设置了默认值为空字符串或者null，它通常不会自动恢复到显示所有可用数据的状态。这是因为下拉框的`placeholder`属性或`clearable`设置并未触发一个动态加载所有数据的行为。 在element-ui中，如果想要在下拉框内容清空时加载所有的数据，你需要明确地在组件的某个生命周期函数（如`mounted()`或`updated()`）中处理这个逻辑，例如： ```javascript <template> <el-select v-model="selectedValue" placeholder="请选择" clearable @clear="loadAllData"> <!-- ... --> </el-select> </template> <script> export default { data() { return { selectedValue: '', allData: [] // 假设这是你的所有数据 }; }, methods: { loadAllData() { this.selectedValue = ''; this.$set(this.allData, 0, ''); // 如果你想保持数据列表完整，可以在这里添加一个占位项 this.$emit('input', this.allData); // 当数据改变时，让组件更新视图并显示所有数据 } }, mounted() { this.loadAllData(); // 初始加载所有数据 } }; </script> ``` 在这个例子中，`@clear`事件监听器会在清除选择时执行`loadAllData`方法。确保你在实际应用中替换`allData`为你存储所有数据的变量，并根据需求调整处理方式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值