<template>
<van-picker
title="标题"
:columns="searchColumns" //数据列表
>
<template #title>//#title 显示在picker-title位置
<van-field
v-model="searchKey"//双向绑定数据
placeholder="请输入搜索内容"
clearable
/>
</template>
</van-picker>
</template>
<script>
import { Picker, Field } from 'vant'//引用Vant组件
export default {
name: 'demo',
data() {
return {
columns: [], //组件使用数据列表，初始化后不改变
searchColumns: [],//搜索筛选后的数据列表，随着查询内容改变
}
}，
mounted() { //初始化数据
this.getList();//加载页面获取数据
},
methods: {
/* 获取数据列表方法 */
async getList() {
try{
const { res } = await = getList(); //请求封装接口
const { code, msg, data } = res;//接口返回数据
if( code === 200){
this.columns = data;//存入数据
this.searchColumns = data;//给查询数组初始化数据
}
} catch( e ) { throw new Error( msg ) }
}
},
watch: { //实时监听搜索输入内容
searchKey: function () {
let key = String( this.searchKey );
key = key.replace( /\s*/g, "" );//去除搜索内容中的空格
const reg = new RegExp( key, "ig" ); //匹配规则-i：忽略大小写，g：全局匹配
/* 进行筛选，将筛选后的数据放入新的数组中，‘name’键可根据需要搜索的key进行调整 */
this.searchColumns = this.columns.filter( item => item.name.match( reg ) !=null );
}
}
}
</script>
<style lang="less" scoped>
</style>