element ui el-select 输入过滤器效果启用

在element ui 中使用数据下拉选项代码如下

<el-form-item label="省份">
    <el-select v-model="provinceId"  placeholder="全部">
        <el-option v-for="item in arrProvince"
                    :key="item.Value"
                    :label="item.Name"
                    :value="item.Value"></el-option>
    </el-select>
</el-form-item>

数据如下：

data {
  provinceId:0,
  arrProvince:[{Value:1,Name:"河北省"}... ...]
}

这个时候下拉的就是31个省份信息，体验不太好，因为下拉太长了，不好找到自己想要的数据 。在element ui中的select组件中我们可以使用它提供的筛选功能，启用后就可以在下拉框中输入文字，然后选项会根据内容自动筛选选项。启用方法是添加filterable属性。代码如下：

<el-form-item label="省份">
    <el-select v-model="provinceId" filterable  placeholder="全部">
        <el-option v-for="item in arrProvince"
                    :key="item.Value"
                    :label="item.Name"
                    :value="item.Value"></el-option>
    </el-select>
</el-form-item>

效果如下：

lebang2020.cn出品。