el-select中的value-key的使用方法

2,041 阅读1分钟

el-select中的value-key的使用方法

element-ui 的组件el-select的 value-key 作为 value 唯一标识的键名,绑定值为对象类型时必填

使用场景:当el-options中的:value绑定的值是对象类型时,我们就需要使用这个属性。

value-key 的取值必须得是 el-options 中 item 的属性

  <el-select
              v-model="ruleForm.fangAnId"
              placeholder="请选择线路方案"
              :loading="fangAnLoading"
              loading-text="正在获取线路方案集合"
              @change="currentFangAnLabel"
              value-key="ID"
            >
              <el-option
                v-for="item in fangAnObjArray"
                :key="item.ID"
                :label="item.fangAnName"
                :value="item"
              >
              </el-option>
            </el-select>
  data() {
    return {
     
      fangAnObjArray: [],
      ruleForm: {
        projectId: "",
        fangAnId: {},
      },
      fangAnLabel:'',
      projectLoading: true,
      fangAnLoading: true,
     
    };
  },
  
 // 获取当前方案名称
    currentFangAnLabel(value) {
      this.fangAnLabel = value.fangAnName
      console.log(this.fangAnLabel);
    },