vue element-ui 使用select 展开选项会抖动

Question

问题描述

select的数据是从接口获取的，页面渲染之后点击下拉框就会（偶尔）抖动如图

问题出现的环境背景及自己尝试过哪些方法

我尝试过将列表数据和选中数据分离开解决但是没有效果。

相关代码

这是element-ui的代码

<span class="search-label span-margin">评测类型</span>
        <el-select
          size="small"
          placeholder="请选择"
          class="input-width span-margin"
          v-model="queryParams.SelectedEvaluateType"
        >
          <el-option
            v-for="item in baseData.EvaluateType"
            :key="item.Name"
            :label="item.Name"
            :value="item.Name"
          ></el-option>
        </el-select>

这是js相关代码

export default {
  name: 'home',
  data() {
    return {
      queryParams: {
        ProjectName: '',
        StartTime: this.$nstand.startTime(-30), //7天之前
        EndTime: this.$nstand.endTime(0),
        UnitName: '',
        SelectedStatus: '',
        SelectedEvaluateType: ''
      },
      baseData: {
        AuditStatus: [],
        EvaluateType: []
      }
    }
  },
  mounted: function() {
    this.loadBaseDate()

    this.handleSearchProject() //表格数据
  },
  methods: {
    //加载基础数据（下拉列表）
    loadBaseDate: function() {
      //评测类型
      this.$nstand.ajax({
        method: 'get',
        url: '/api/ServicePackage/GetServices',
        success: response => {
          if (response.data.Success) {
            this.$set(this.baseData, 'EvaluateType', response.data.Data)
          }
        }
      })
    }
  }
}

你期待的结果是什么？实际看到的错误信息又是什么？

不知道为什么会抖动，不知道跟数据是否有关？

Answer 1

高版本chrome会，低版本不会,ele的问题，官方文档也是这样

Answer 2

只有在弹出框或者抽屉组件中使用select才会出现抖动现象
chrome的问题，76版本已经不会有这个问题了