el-select下拉框没有数据

el-select给options赋值后,下拉框无数据

琹箐

12247人浏览 · 2022-03-21 14:54:17

琹箐 · 2022-03-21 14:54:17 发布

一、问题

1.突然发现给options赋值了，但是下拉框没有数据，就很奇怪。

二、问题详细描述

1.直接用假数据(手动添加的数据）赋值给options，下拉框中的数据正常显示。

1）代码如下：

<template>
    <template v-for="(contentItem, contentKey) of content">
      <el-select
        v-model="contentItem.value"
        :key="contentKey"
        placeholder="请选择人员"
      >
        <el-option
          v-for="(item, itemKey) of contentItem.options"
          :key="itemKey"
          :value="item[contentItem.matchKey]"
          :lable="item[contentItem.matchKey]"
        >
          <span>{{ item[contentItem.matchKey] }}</span>
          <span>{{ item[contentItem.lable] }}</span>
        </el-option>
      </el-select>
    </template>
</template>
<script>
export default {
  data() {
    return {
      //下拉框数据
      content: {
        person: {
          value: "",
          matchKey: "name",
          type: "select",
        },
      },
    },
   },
   mounted(){
      this.initData();
      this.content.person.value = "奇怪的事情";
   },
   methods:{
   initData(){
       this.getPerson();
    },
    //获取用户
    getPerson() {
      console.log("person---get");
      this.content.person.options = {
        0: {
          name: "小明",
          id: "01",
        },
        1: {
          name: "小华",
          id: "02",
        },
        2: {
          name: "小青",
          id: "1000000000000001",
        },
      };
   }
}
</script>

2）效果如图1所示

2.调用接口添加数据

1）代码如下：

<template>
    <template v-for="(contentItem, contentKey) of content">
      <el-select
        v-model="contentItem.value"
        :key="contentKey"
        placeholder="请选择人员"
      >
        <el-option
          v-for="(item, itemKey) of contentItem.options"
          :key="itemKey"
          :value="item[contentItem.matchKey]"
          :lable="item[contentItem.matchKey]"
        >
          <span>{{ item[contentItem.matchKey] }}</span>
          <span>{{ item[contentItem.lable] }}</span>
        </el-option>
      </el-select>
    </template>
</template>
<script>
import { _findPacuDoctorList } from "@/api/implemenceAPI";
export default {
  data() {
    return {
      //下拉框数据
      content: {
        person: {
          value: "",
          matchKey: "name",
          type: "select",
        },
      },
    },
  }
   mounted(){
      this.initData();
      this.content.person.value = "奇怪的事情";
   },
   methods:{
   initData(){
       this.getPerson();
    },
    //获取用户
    getPerson() {
      console.log("person---get");
      let params = {
        data: {
          type: 4,
          name: typeof inputContent === "string" ? inputContent : "",
        },
        size: "100",
        sortBy: "name",
      };
      _findPacuDoctorList(params)
        .then((result) => {
          if (result.status === 200) {
            console.log("result", result);
            this.content.person.options = result.data.content;
          }
        })
        .catch((error) => {
          console.log("error", error);
        });
   }
}
</script>

2）效果如图2所示：

调用了接口，并且有数据返回,但是下拉框中没有数据。

3.百思不得其解呀，明明就是类似的东西，只是一个是直接赋值，一个是调接口赋值而已，怎么会这样呢？

1）更奇葩的是我想复现上述1、2所示的情况时，发现1无法复现---即直接赋值也会导致图2的效果，下拉框无数据。

a.仔细对比后，发现上述1所示现象的前提条件是在给下拉框数据options赋值前，对该下拉框出现的值提前赋初始值（如代码1中mounted函数中的: this.content.person.value = "奇怪的事情";
)

b.若删除代码1中的 this.content.person.value = "奇怪的事情";则会发现下拉框如图2 所示，下拉框中没有数据。

4.更神奇的事情，若代码1和代码2合并，即先用假数据给options赋值，再用接口获取数据给options赋值。则会导致第一次点击下拉框数据是：假数据，并选中一个选项，如图3所示；之后点击下拉框数据是：调用接口获取的数据，如图4所示。

三、解决方法

1.仔细检查才发现，上面的奇葩现象是因为我声明 data时没有添加 options属性。options属性不是响应式的。

如二、问题详细描述 , 4中描述的情况：在mount时已经给 person赋值,data初始化完毕,第一次选择的时候，先用假数据给options赋值,下拉框有了数据，接着异步调用接口给options重新赋值,但因为options是非响应式的，没有更新。选择一个选项，触发点击事件的同时，还触发了 updatePopper事件,更新了下拉框的值.所以之后点击下拉框数据都是调用接口返回的数据

  data() {
    return {
      //下拉框数据
      content: {
        person: {
          value: "",
          matchKey: "name",
          type: "select",
        },
      },
    },
   },

2.在data中添加 options属性即可: options:[]

  data() {
    return {
      //下拉框数据
      content: {
        person: {
          value: "",
          matchKey: "name",
          type: "select",
          options:[],
        },
      },
    },
   },

上述所述的奇葩问题都没有了。

1）直接用假数据赋值，下拉框有值

2）直接用接口返回值赋值，下拉框有值

3）先用假数据赋值，再用接口返回值赋值,下拉框有值（接口返回值）