select动态获取option对象的某一个值

需求:使用elementui框架，第一个下拉框选中一个id，但是保存是保存名字；根据id去发送请求对第二个下拉框进行数据渲染。

上代码

<el-col class="name" style="margin: 0px">
            <span>流程名称</span>
            <el-select
              v-if="action != 'detail'"
              size="medium"
              filterable
              v-model="form.flowname"
              value-key="value"
              @change="fetchDefKey"
            >
              <el-option
                v-for="item in flownames"
                :key="item.id"
                :label="item.name"
                :value="item.defKey"
              >
              </el-option>
            </el-select>
            <span v-else>{{ form.flowname }}</span>
          </el-col>
          <el-col class="name">
            <span>节点名称</span>
            <el-select
              size="medium"
              filterable
              v-model="form.nodename"
              v-if="action != 'detail'"
              @change="fetchName"
            >
              <el-option
                v-for="(item, index) in nodenames"
                :key="index"
                :label="item.name"
                :value="item.nodeId"
              >
              </el-option>
            </el-select>
            <span v-else>{{ form.nodename }}</span>
          </el-col>

说明：
1.flownames是我的对象数据,我value绑定的是它的key值，而需求是保存名字，所以我绑定的是名字

v-model="form.flowname"

2. 利用@change事件对vlaue变化的值进行监听；

  fetchDefKey(e) {
     //e=defKey
     this.form.flowid = e;//保存的目的是为了下一个选择框请求的参数
     this.defKey = this.form.flowid; 
     let defKey = this.defKey;
     this.flownames.forEach((el) => {//遍历flownames
       if (e === el.defKey) {
         this.form.flowname = el.name;  //绑定名称是根据遍历选中的名称相对应才赋值
       }
     });
     queryNodeList({ defKey }).then((res) => {
       this.nodenames = res.data;  //这个是我的业务需求，根据选中的第一个下拉框值变化第二个下拉框的数据，发送请求
     });
   },

效果图

注意

在点击编辑的时候，因为change事件在数据变化的时候才会触发，所以在你把之前保存的数据渲染上去之后会发现第二个下拉框虽然默认显示你保存的数据，但是你下拉的时候会显示暂无数据这个字样，是因为没再一次发送数据请求，这时候就需要在编辑函数那里再一次触发这个请求就可以了。

	/**
     * 编辑
     */
    async fetchSingleList() {
      let id = this.id;
      await queryNodeDetail({ id }).then((res) => {  //获取保存的数据
        this.form = res.data; //数据赋值给form，进行数据回填
        let defKey = res.data.flowid; 
        queryNodeList({ defKey }).then((res) => {
          this.nodenames = res.data; //把重新赋值给第二个下拉框
        });
      });
    },