博客

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>