参考链接: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了。
标签:el,第十八,value,project,键值,key,id,select From: https://www.cnblogs.com/smart-zihan/p/17750670.html