el-select全屏不展示

el-select 全屏时下拉框不展示，加了:popper-append-to-body="false"以后，@change事件不起效了，点击无反应，不知道各位有没有遇到这种情况？应该如何解决呢

可能是由于 popper-append-to-body 和 fullscreen 模式的冲突导致的，请尝试以下解决办法：

在全屏时将 popper-append-to-body 属性设置为 true，它会将下拉框显示在 元素中，这样就不会导致下拉框隐藏了。

自己手动修改 popper 的appendTo配置，让其回到之前的el-select内部，例：

<template>
  <div class="fullscreen" ref="fullscreen">
    <el-select v-model="value" @change="handleChange" :readonly="readonly" :disabled="disabled" popper-append-to-body="false">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { label: '选项一', value: 'option1' },
        { label: '选项二', value: 'option2' },
        { label: '选项三', value: 'option3' },
      ],
      value: '',
    };
  },
  methods: {
    handleChange(value) {
      console.log(`选中了${value}`);
    },
    initPopper() {
      // 获取 popper 实例
      const popper = this.$refs.select.popperElm.__vue__.popper;
      // 设置 appendTo 属性为父元素
      popper.options.appendTo = this.$refs.fullscreen;
    },
  },
  mounted() {
    this.initPopper();
  },
};
</script>

<style>
.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}
</style>

• 这篇文章：el-select实现change事件 也许有你想要的答案，你可以看看
• 除此之外, 这篇博客: el-select 下拉选择框添加单位显示中的 效果图： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 

• 以下回答由chatgpt基于相关博客总结生成:

  根据提供的参考资料和问题描述，可以得出以下解决方案：

  1. 如果el-select选项无法展示，可以尝试使用v-html解析数据，并将空格替换为" &nbsp ；"，代码如下：

  <el-select v-model="selForm.ydlbValue" clearable placeholder="请选择">
    <el-option
      v-for="item in ydlb"
      :key="item.ydlbbm"
      :label="item.ydlbmc"
      v-html="item.ydlbmc3"
      :value="item.ydlbbm">
    </el-option>
  </el-select>
  
  idjYdlb_selectYdlb(this.jgbm).then(res=>{
    for (var i in res.content) {
      res.content[i].ydlbmc3=res.content[i].ydlbmc.replace(' ','&nbsp;&nbsp;&nbsp;&nbsp;')
    }
  })
  

  1. 如果el-select在全屏模式下无法响应点击操作，可以尝试给下拉框渲染出的span标签添加white-space: pre样式，代码如下：

  .el-select-dropdown__item{
    white-space: pre;
  }
  

  1. 如果需要一次性渲染大量数据，可以使用Vue指令el-select-loadmore实现下拉加载更多。代码如下：

  <el-select v-model="choose" size="small" v-el-select-loadmore:rangeNumber="loadMore(rangeNumber)">
    <el-option
      v-for="(item, index) in list.slice(0, rangeNumber)" 
      :key="index"
      :label="item.label"
      :value="item.value"></el-option>
  </el-select>
  
  Vue.directive('el-select-loadmore', {
    bind(el, binding) {
      let self = this
      // 获取element-ui定义好的scroll盒子
      const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
      SELECTWRAP_DOM.addEventListener('scroll', function () {
        const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
        if (condition) binding.value()
      });
    }
  });
  
  export default {
    data() {
      return {
        list: [], // 数据源
        choose: "", // 当前选中的值
        rangeNumber: 10, // 默认渲染的条数
      }
    },
    created(){
      this.getList() // 初始化获取数据
    },
    methods: {
      // 获取数据
      getList(){
        for (let i = 0; i < 100000; i++){
          this.list.push({
            label: "menu",
            value: "menu"
          })
        }
      },
      // 下拉加载更多
      loadMore(n){
        return () => this.rangeNumber += 5 // 每次滚动到底部可以新增条数
      },
    }
  }