vue2基础--实现下拉框选择筛选

下拉框筛选常用于搜索筛选出列表中的数据

1.代码

<el-select

v-model="type"

clearable

placeholder="类型"

>

<el-option

v-for="item in typeOptions"

:key="item.value"

:label="item.label"

:value="item.value"

/>

</el-select>

2.定义的参数和映射

data() {

return {

type: "1", //下拉框绑定的参数

typeOptions: [ //下拉框中参数值和中文之间的映射

{ value: "1", label: "待审核" },

{ value: "2", label: "已通过" }

],

}

}

type: "1", 页面初始化时下拉框中显示的是"待审核"

如果定义的 type: "2" ,则页面初始化时下拉框中显示的是"已通过"

如果定义的 type: "" ,则页面初始化时下拉框中显示的是占位placeholder定义的"类型"

此时打印type就能拿到下拉框选中的value

console.log(' 下拉框选中的value' ,this.type）

将this.type赋值给接口从参数，就可以实现列表数据的筛选