今天做项目的时候遇到了一个很棘手的问题，elementui的select下拉框也用了好多次了，今天当用对象绑定数据的时候回显就有问题了，会显得是个数字，百思不得其解，然后就翻箱倒柜，找到了以前做的项目，以前的代码是这样写的:

<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
      <el-option
        v-for="(item, index) in typeArr"
        :label="item.label"
        :key="index"
        :value="item.value"
      ></el-option>
    </el-select>
//js
   typeArr: [
        {
          label: "区域一",
          value: 1,
        },
        {
          label: "区域二",
          value: 2,
        },
        {
          label: "区域三",
          value: 3,
        },
      ],
      ruleForm: {
        region: 1,
      },

今天写的时候我是把数据保存在一个对象里面的，如下所示:

    <el-select
      value-key="value"
      v-model="ruleForm.region"
      placeholder="请选择活动区域"
    >
      <el-option
        v-for="(value, key) in typeObj"
        :label="value"
        :key="key"
        :value="key"
      ></el-option>
    </el-select>
//js
   typeObj: {
        1: "区域一",
        2: "区域二",
        3: "区域三",
      },

这样写是我觉得这里用对象结构会更简单一些，但是问题就出现了，当用数组的时候会显示文字，但是用对象的这个回显的是个数字，如下所示:

select回显问题.png