对element多级联动键盘移动会被隐藏bug解决-感觉不太好但也实现了-看有没有爸爸优化下

最新推荐文章于 2023-10-18 15:29:46 发布

原创最新推荐文章于 2023-10-18 15:29:46 发布 · 194 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端同时被 2 个专栏收录

171 篇文章

订阅专栏

element

104 篇文章

订阅专栏

本文介绍了一种Element UI多级联动组件在数据量过大时，使用键盘上下键选择时选中项滚动出视野的问题及解决方案。通过监听键盘事件并调用scrollIntoView方法确保选项始终可见。

大概问题是 element 多级联动最后一个当数据过多的时候用键盘上下键移动选中项会消失在视野之中

 解决方法:  @keyup.up.native="KeyUpUp" @keyup.down.native="KeyUpUp"

 e.scrollIntoView() 强制出现在视野之中

	<el-cascader-panel @keyup.up.native="KeyUpUp" @keyup.down.native="KeyUpUp" ref="leave3IDcascader" v-model="form.leave3ID" :options="industryOptions" @change="handleChange" />

让选中项强制出现在视野之中

KeyUpUp(e){
      document.querySelectorAll(".el-cascader-node.in-active-path").forEach(e=>{
        e.scrollIntoView()
      })
      document.querySelectorAll(".el-cascader-node.is-active").forEach(e=>{
        e.scrollIntoView()
      })
 }