vue中在elementui对话框里使用Select 选择器，选中内容，重新打开对话框，Select 默认内容显示错误的问题

这是问题出现的地方，当我设备名称选中测试3，重新打开对话框，进行编辑的时候，显示的却是60，这个问题困扰了我很久，最后还是通过向朋友求助，才解决这个问题，

这是我下拉选项的内容

 这是el-table中设备名称列，接收的是设备名称字段

<el-table-column label="设备名称" prop="deviceName" />

这是弹出对话框中的设备名称下拉选项内容

<el-form-item label="设备名称" prop="deviceId">
            <el-select
              v-model="specsForm.deviceName"
              filterable
              placeholder="请选择"
              @change="deviceChange"
              class="dialog-form-select"
            >
              <el-option
                v-for="item in shebeilist"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

打印shebeilist的结果如下

 

当下拉选项，选中一个选项的时候会触发deviceChange事件处理函数，这个函数的参数就是deviceId，我们可以在deviceChange中进行如下处理，利用的是filter方法，得到一个满足条件的新数组，此时就解决了这个问题啦，同时非常感谢我在小米工作的同学帮我解决~

   // 设备下拉选项
    deviceChange(v, i) {
      //设备名称select改变
      console.log(406, v, i, this.shebeilist);
      const activeShebei = this.shebeilist.filter((s) => {
        return s.id == v;
      })[0].label;
      console.log(activeShebei);
       //或者直接
      //this.specsForm.deviceName = this.shebeilist[0].label
      this.specsForm.deviceName = activeShebei;
      this.specsForm.deviceId = v;
    },