第十八篇 - el-select获取整个对象值

参考链接：https://blog.csdn.net/qq_41885295/article/details/121956909

常规el-select时的用法是这样的

<el-form-item label="Project" style="flex: 1" :rules="[ { required: true, message: '', trigger: 'blur' },]">
   <el-select v-model="form.ProjectRelated" style="width: 100%" placeholder="select a project" @change="projectchange($event)">
      <el-option :label="pro.project_name" :value="pro.project_id" v-for="pro in form.Projectlist" :key="pro.project_id" ></el-option>
   </el-select>
</el-form-item>

 

 

v-model得到的是el-option选中时value的值，即project_id的值。label是在筛选框中显示的值，即project_name的值。value是选中project_name时返回的project_id的值，会给到ProjectRelated。v-for是循环语句，循环整个project列表。key是循环时唯一的键值。@change是当选定一个选项时触发的函数，$event传递的是form.ProjectRelated的值。

 

不过有时候我们的需求是当选中选项时获取整条project的信息，而不仅仅是project_id，这是我们就需要用到value-key键值

<el-form-item label="Project" style="flex: 1" :rules="[ { required: true, message: '', trigger: 'blur' },]">
   <el-select v-model="form.ProjectRelated" value-key="project_id" style="width: 100%" placeholder="select a project" @change="projectchange($event)">
       <el-option :label="pro.project_name" :value="pro" v-for="pro in form.Projectlist" :key="pro.project_id" ></el-option>
   </el-select>
</el-form-item>

 

这个value-key就是在pro中指定其中的一个唯一性键值，这里用的是project_id。这样当你选中其中一个project项时，返回的就是整个pro对象，而不是pro.project_id了。