iview中的Select选择器
在后台系统中使用Select是非常常见的,话不多说
<Select v-model="model2" size="small" style="width:100px" @on-change="xxxxxx"><Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }} </Option></Select>
在使用select的时候,最常用的方法就是通过on-change
中的函数来操作选择的值,使用v-model绑定值,可以在选择框中绑定默认值,在编辑的时候,可以渲染之前的值。
同时在一些关联选择的时候,也是用on-change
操作比如在表单中,需要选择省份在选择城市,这里可以使用on-change
来做操作,当选择省份的时候,执行城市的获取函数,当然我们需要提前获取省份。
<Row :gutter="32"><Col span="12"><FormItem prop ="provinceId"><span style="color: red">*</span><span>所在省份</span><Select v-model.trim="formData.provinceId" placeholder="请选择省份" @on-change="getCityItems" :filterable="constTrue"><Option v-for="item in provinceItems" :value="item.id" :key="item.id">{{ item.nameChs }}</Option></Select></FormItem></Col><Col span="12"><FormItem prop = "cityId"><span style="color: red">*</span><span>所在城市</span><Select v-model.trim="formData.cityId" placeholder="请选择城市" :filterable="constTrue" ><Option v-for="item in cityItems" :value="item.id" :key="item.id">{{ item.nameChs }}</Option></Select></FormItem></Col></Row>