vue项目列表页查询条件常用的有输入框查询以及下拉选择查询,通常情况下,下拉选择查询需默认选择“全部”。
例如,选择医院等级,默认全部。
<el-form-item label="医院等级">
<el-select
v-model="form.orgGrade"
placeholder="请选择"
size="small"
style="width:100px;"
>
<el-option
v-for="item in hospitalGrade"
:key="item.label"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
//hospitalGrade列表
hospitalGrade: [
{
label: "全部",
value: ""
},
{
label: "三甲",
value: "1"
},
{
label: "三乙",
value: "2"
},
{
label: "三丙",
value: "3"
},
{
label: "二甲",
value: "4"
},
{
label: "二乙",
value: "5"
},
{
label: "二丙",
value: "6"
},
{
label: "一级",
value: "7"
},
{
label: "未定级",
value: "8"
}
]
el-option的 label
值是下拉框的选择文案,value
值是传给后端的值。这里后端规定的传值为label值的文字字符串,若把el-option的value
值设置成item.label
,就无法在页面上默认显示“全部”了。后端还规定"全部"情况下传空值。
可以根据value值获取label值传给后端。
let params = this.form;
this.hospitalGrade.map(item=>{
if(item.value==params.orgGrade){
if(item.label == "全部"){
params.orgGrade=""
}else{
params.orgGrade=item.label
}
}
})