VUE中显示范围有限，元素滚动时el-option超出元素显示范围

2022-01-11 17:58:15 阅读：392 来源： 互联网

首先感谢在遇到问题时搜索到的一些答案，同时指路优秀文章：Element-ui中元素滚动时el-option超出元素区域的问题 - 掘金 (juejin.cn)

小编遇到的问题和链接中楼主的问题几乎是同一个问题，奈何小编才疏学浅，看不太懂，只能用笨方法来解决问题啦。

先看问题还原图：

问题描述：

中间红色框的范围为文件的可显示区域，当导入文件过多高度不够时，会触发overflow-y: auto;开启滚动条，可滚动显示。

那么问题就来了，小编在el-element中发现el-option（就是下拉框）的z-index 比较大（小编这边显示是z-index：2003）, 会覆盖在其他元素上面。

看了链接楼主的分析后发现还是不会（小编太笨了），但也学到了是因为移动滚动条的时候, 并没有触发el-element中为el-option所做的隐藏逻辑。

多方查找后终于在el-element中找到了一个可以用起来的方法：

.blur()：使 input 失去焦点，并隐藏下拉框

解决方法：

思路：

点击下拉框后，在下拉框超出可显示范围时隐藏，此时分为上边框与下边框
利用元素的高度，卷起的高度，整体的高度。。。+ - * / 计算出要隐藏的距离
利用.blur（）使下拉框隐藏

代码：

html中代码：

<el-table-column label="文档类别" prop="category">
  <template slot-scope="scope">
    <el-select
      ref="category"
      v-model="categoryName"
      placeholder="请选择文档类别"
      clearable
      @visible-change="changeValueCategory($event)"
     >
       <el-option value="categoryName" style="height: auto">
         <el-tree
            ref="categoryTree"
            :data="typeList"
            node-key="id"
            :props="typeTreeProps"
            @node-click="getTypeList"
          >
        </el-tree>
      </el-option>
    </el-select>
  </template>
</el-table-column>

@visible-change="changeValueCategory($event)"

@visible-change 下拉框出现/隐藏时触发
$event 出现则为 true，隐藏则为 false

data中：

 data() {
   return {
     typeList: [], // 接口返回的数据，展现在el-option中，用el-tree包裹
     typeTreeProps: {
       children: 'children',
       label: 'name'
     },
     categoryName: ''，
     categoryIndex: ''
   }
 }

methods中

changeValueCategory($event, index) {
  // categoryBox 在export default 外设置的 var categoryBox = null
  // 获取显示范围的元素
  categoryBox = document.getElementsByClassName('tab-table')[0]
  // 获取下拉选择框 select
  this.categoryIndex = this.$refs.categoryName
  // 获取下拉选择框 select 的整体父级
  const item = this.$refs.categoryName.$el.offsetParent
  // 文件所占整体的高度（包括卷起的）
  // height = 添加文件的个数 * 这条元素所占的高度 + 这条元素的标题的高度
  const height = this.tableData.length * item.offsetHeight + item.offsetParent.offsetTop
  // 距上边高度topHeight = 这条元素所占的高度 + 这条元素与顶边的距离 + 这条元素的标题的高度
  const topHeight = item.offsetHeight + item.offsetTop + item.offsetParent.offsetTop
  //做判断：如果下拉框打开
  if ($event === true) {
    // 监听滚动条
    categoryBox.onscroll = () => { 
      // 距下边高度botHeight = 整体的高度 - 卷起的高度 - 这条文件所占的高度
      const botHeight = height - categoryBox.scrollTop - categoryBox.offsetHeight
      // 再判断
      // 如果卷起的高度 大于等于 他距离上边框的高度（10的余数）就是超出了上边范围
      // 或者整体的高度 减去 他距离上边框的高度 小于等于他距下边的高度，那就超出了下边范围
      if (categoryBox.scrollTop >= topHeight - 10 || height - topHeight <= botHeight) {
        // 利用.blur()隐藏下拉框
        this.categoryIndex.blur()
      }
    }
  }
}

附其中：const item = this.$refs.categoryName.$el.offsetParent 的范围图：

上边的蓝色是el-table-column标题，也是所述中这条元素的高度

总结：

这个方法是小编实在看不懂大神们的解说及方法，所以自己想出来的笨方法，希望对同样困惑的小伙伴们有所帮助，其中可能有存在很多错误，也希望大家能够指出，不断学习。小编也在学习更多知识丰富自己，大家一起加油吧！！！！！！

标签：el,VUE,元素,高度,item,小编,下拉框
来源： https://blog.csdn.net/weixin_50482977/article/details/122436070

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

VUE中显示范围有限，元素滚动时el-option超出元素显示范围

先看问题还原图：

问题描述：

解决方法：

思路：

代码：

总结：