vue+elemenUI——select下拉框初始化问题：数据已有，但不回显

参考：https://blog.csdn.net/qq_43779703/article/details/100693565

　　   https://blog.csdn.net/xuaner8786/article/details/81217075

          https://blog.csdn.net/qq_31324879/article/details/101775469

　　   https://blog.csdn.net/Shids_/article/details/123087985

 

我的情况：下拉框数据根据后台返回的数据进行初始化，但一直无数据，控制台打印发现数据是有的，但不回显

 

页面：

<el-select  v-model="num" placeholder="选择数量"         
    @change="numChange"
    @visible-change="numTrigger">
    <el-option
       v-for="item in options_num"
            :key="item"
            :label="item"
            :value="item">
    </el-option>
</el-select>

data:

data() {
      return {
        options_num: [],
        num: '',
      }
    },

获取数据初始化:

 for (let i in res.data.list) {
     _this.options_num[i] = parseInt(i) + 1;
}

 

原因： 1. 后端传给我的value值是Number类型的，但是el-select绑定的值num是String类型的，值的类型不匹配，所以拿到数据显示在页面上会出现一些小问题

　　　     解决： 将data中的 num:' '改为 num:0 即可

　　     2.

　　　　数组的响应式方法：

　　　　 　　vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

　　　　　　　　push()、pop()、shift()、unshift()、splice()、sort()、reverse()

　　　　数组的非响应式方法:　　

　　　　　　　　由于 JavaScript 的限制，Vue 不能检测以下数组的变动：　　　　　　

　　　　　　　　(1). 当利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue，（就是我现在的方法，其实改用push就好）

　　　　　　　　(2). 当修改数组的长度时，例如：vm.items.length = newLength

　　　　　　　　针对(1)可用  this.set(object, key, value)方法将响应属性添加到嵌套的对象上.实现改变数据自动渲染，如下：　 

 for (let i in res.data.list) {
      _this.$set(_this.options_num, i, parseInt(i) + 1);
}

             　　　      或者在初始化后添加一句：this.$forceUpdate() 强制刷新

　　　　　　　　

　　　　　　　　针对(2)可用splice

 

还有一种情况：点击下拉框，图标有展开/折叠变化，但选项框并没有显示出来。查看下拉元素，发现是层级原因被遮盖了。

解决方法：在 el-select 组件中加上 transfer="true" :popper-append-to-body="false" 即可。

<el-select v-model="value" transfer="true" :popper-append-to-body="false">
...
</el-select>