用el-select处理后台数据进行页面渲染，返回数据如果为空或者无法渲染文字时的处理

柔光的暖阳◎ 2022-11-07 14:40 477阅读 0赞

### 用el-select处理后台数据进行页面渲染 ###

最近用select做下拉选择器的时候，出了一些bug。具体表现为无法从后台渲染数据到选择器中或者选择器中的文字不显示。

我的返回数据是这样的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l6eDEyNQ_size_16_color_FFFFFF_t_70]

组件部分：

<el-select v-model="name" placeholder="请选择" @change="handleChange2()"  clearable :options="options2"
              :props="optionProps2">//v-model的值根据自己的需求绑定
        <el-option
          v-for="item in options2"
          :key="item.name"
          :label="item.name"
          :value="item.name">//根据需要字自己选择字段，此处我需要绑定name
        </el-option>
      </el-select>

js部分：

export default {
    data() {
    return {
    optionProps2: {
            value: "name",
            label: "name",
            checkStrictly: true,
          },
          options2: [],
    
    }
    }
    },
    mounted() {
        this.handleChange2();
      },
    methods: {
    handleChange2() {
          getName()//获取类型列表的接口
            .then((res) => {
              res.obj.forEach((item, index) => {
                item.removeLoading = false;
              });
               this.options2=res.obj//这一步非常重要
            })
            .finally(() => {
              this.tableLoading = false;
            });
        },
    }

现在就成功啦！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l6eDEyNQ_size_16_color_FFFFFF_t_70 1]  
本人也是刚起步学vue，花了挺长的时间才弄清楚。希望能帮到大家（有什么更好的方法也可以留言告诉我）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l6eDEyNQ_size_16_color_FFFFFF_t_70]: /images/20221023/1e90923f30944d38a682e76be5bcdb0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l6eDEyNQ_size_16_color_FFFFFF_t_70 1]: /images/20221023/05ca4a91abaf4fe987794bf307a9574a.png