el-select内嵌套el-select---筛选下拉列表遇到的若干问题及解决

效果展示：

---

 

问题描述 1：

当 el-select 嵌套 el-select 点击内部下拉框选项导致外部下拉框消失

---

原因分析：

由于点击内部下拉框选项导致外部select组件clickOutside监听事件触发导致的。

---

解决方案：

内部select组件下拉框打开时暂时移除外部mouseUp监听函数，外部select组件添加 ref="xxx"属性，内部select添加 @visible-Change=""visibleChange"事件函数 

visible-Change 事件在下拉框出现/隐藏时触发 出现为 true 隐藏为 false 

<el-select  @visible-change="visibleChange">....</el-select>

visibleChange(value) {
   console.log(value);
   if (value) {
     this.documentHandler = this.$refs.aslect.$el['@@clickoutsideContext'].documentHandler
     this.$refs.aslect.$el['@@clickoutsideContext'].documentHandler = (mouseup = {},             
     mousedown = {}) => {}
   } else {
     this.$refs.aslect.$el['@@clickoutsideContext'].documentHandler = 
     this.documentHandler
   }
},

 

问题描述 2：

当 el-select 嵌套 div 时想把div 定位在外部select下拉框的顶部 当下拉框数据多的时候上面的div不懂 发现使用position: fixed;固定定位会遇到很多棘手的问题比如：div不在下拉框容器内 超出下拉框边框的宽 下拉列表显示与div重叠

---

原因分析：

 position: fixed; 相对于浏览器窗口进行定位的 所以div无法100% 撑开下拉框了 使得div飘浮在下拉框上面

---

解决方案：

 可以模拟一个假的div 和真实的div宽高一样放在el-select内 不做任何定位 把真的div调整到 假的div上 覆盖住 这样 既可以解决div 覆盖 下拉框显示的字 又可以100%撑开 下拉框的宽度了 我的问题全部都能解决 可是又发现新的问题就是每次下拉的时候真的div 会闪动一下 在定位到假的div上面 我没搞清楚 啥原因 总之体验不是很好 迫不得已继续换一种实现方式

另外实现问题2的思路：

   可以不考虑div的定位 就放那 可以把底下的数据进行滚动的形式来展示 首先要搞清楚el-select下拉框有个默认最大高度max-height 当下拉框数据过多超过这个值就会触发 overflow: scroll;滚动效果 这个滚动效果是整体的下拉框的滚动势必会带着div 滚进去 那么我们就不能让这个滚动条出现 所以给展开的下拉框内的 el-option 外面包裹一个div 给这个div 添加宽（100%）高（max-height：178px 这个值可以试达到触发外面滚动条的最大值） overflow-y:scroll 属性 这样当 el-option 数据多的时候就会在 嵌套el-option 的div中产生一个滚动条 而上面的div保持不动了

---

解决方案：

<el-select ref="aslect" @visible-change="otuselect">
    <div style="width: 699px;height: 64px;">
          <span>车型 : </span>
          <el-select placeholder="车型" v-model="value2" style="width:120px"     
              @visible-change="visibleChange">
            <el-option v-for="(item,i) in carmodule" :key="i"
              :label="item"
              :value="item"
              :title="item">
            </el-option>
          </el-select>

          <span>&emsp;阶段 : </span>
          <el-select placeholder="阶段" v-model="value3" style="width:120px" 
            @visible-change="visibleChange">
            <el-option v-for="(item,i) in stage" :key="i"
              :label="item"
              :value="i"
              :title="item">
            </el-option>
          </el-select>
    </div>

    <div style="width:100%;max-height:178px;overflow-y:scroll" v-if="options.length>0">
         <el-option
            v-for="item in options"
            style="margin-bottom:-6px;"
            ref="myselect"
            :key="item.value"
            :label="item.label"
            :value="item.projectId"
            :title="item.label"
            @click.native="mydata(item)">
         </el-option>
    </div>
</el-select>

 

问题描述 3：

有没有发现一个问题就是 当我动态渲染 下拉框的值的时候万一数据为空下拉框就会整体显示一个

我想要的是这样的效果

---

 

 

原因分析：

 猜测当无数据的时候el-select组件会v-else 渲染一个div 就是上面的效果

---

解决方案：

 所以我就联想到 我也弄个div渲染在这 当el-option数据为空的时候 我展示我渲染的div 而且还不能让外面的el-select 触发数据为空时他内置组件中的div 所以我就要搞个假的骗骗他

<el-option value=" " style="text-align:center"></el-option> 这一行代码就是给个空占个位置不至于让外面el-select渲染 无数据那三个字 而是用我自己造的div显示 覆盖在 <el-option value=" " style="text-align:center"></el-option> 这个上 此刻完美实现我的需求了 

        <div style="width:100%;max-height:178px;overflow-y:scroll" v-if="options.length>0">
            <el-option
              v-for="item in options"
              style="margin-bottom:-6px;"
              ref="myselect"
              :key="item.value"
              :label="item.label"
              :value="item.projectId"
              :title="item.label"
              @click.native="mydata(item)">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6;">{{item.ownerId}}</span>
            </el-option>
        </div>
        <div v-else style="position: relative;width: 100%;height: 100px;">
          <el-option value=" " style="text-align:center"></el-option>
          <div style="width:100%;height:100px;line-height: 100px;z-index:5;text- 
               align:center;font-size: 20px;font-weight: 600;color:red;gainsboro;position: 
               absolute;top: 0;">
            暂 无 数 据 !
          </div>
        </div>

 

 总结：遇到没有做过的需求 在网上也找不到时 要多琢磨琢磨 想多多种解决方案 并落地实施 别怕麻烦喜欢的(❤ ω ❤)给个关注加收藏吧