uniapp使用picker-view组件实现选择器可进行搜索
目录
uniapp使用picker-view组件实现选择器可进行搜索
效果图：
1、使用uniapp自带的picker-view组件实现
<template>
<!--pickerHospital 子组件-->
<view class="date-background" v-show="value">
<view class='date-gray-background' @click="hiddeDatePicker"></view>
<view class='date-container'>
<view class="transparent">
<view class='date-confirm'>
<view @click="hiddeDatePicker" class="pickerCancel">取消</view>
<!-- 输入框 -->
<u-search style="width: 70%;" placeholder="请输入医院查询" @clear="clearSearch" @change='searchChange'
:show-action='false' v-model="searchValue" shape="round" clearabled></u-search>
<view @click="confirm1" class="pickerConfirm">确认</view>
</view>
<picker-view :immediate-change='true' indicator-class="indicator" :value="setValues"
@change="bindChange" mask-style="height:100rpx;"
style="width: 100%; height: 80%;position:absolute;bottom:0rpx;text-align:center;background:white">
<picker-view-column class="pickViewColumn">
<view v-for="item in list" :key="item.id" class="u-column-item"
style="height: 68rpx;overflow: hidden;">{{item.name}}
</view>
</picker-view-column>
</picker-view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
dataSource: {
type: Array,
default () {
return []
}
},
pickerValues: { //picker默认展示的值
type: Array,
default () {
return [0]
}
},
value:{
type:Boolean,
default:false
}
},
data() {
return {
searchValue: '', // 搜索值
setValues: [0], // picker 选择值
form: { //要传过去的值
id: '',
name: ''
},
list: this.dataSource,
}
},
onLoad(option) {},
watch: {
dataSource: {
handler(newValue, oldValue) {
this.list = newValue
},
deep: true,
immediate: true,
},
value(newValue, oldValue) {
this.init()
}
},
methods: {
init() {
this.$nextTick(() => {//组件渲染完成后在更新数据
this.setValues = this.pickerValues
})
},
bindChange(e) {
let value = e.detail.value.toString();
this.list.forEach((item, index) => {
if (value == index) {
this.form.id = item.id;
this.form.name = item.name
}
});
},
hiddeDatePicker() {
this.$emit('input',false)
},
confirm1(e) {
if (this.form.id == '' && this.list.length > 0) {
this.form = {
id: this.list[0].id,
name: this.list[0].name
}
}
this.hiddeDatePicker()
this.$emit('recload', this.form);
},
// 搜索查询
async searchChange(e) {
// ，调模糊查询然后 把返回的结果传给this.list数组
let findList = this.dataSource.filter(item => item.name.includes(e))
this.list = findList
if (e == '') {
this.list = this.dataSource
}
this.reset()
},
reset() { //重置
this.form = {
id: '',
name: ''
}
},
clearSearch() { //清空搜索内容
this.searchValue = ''
this.list = this.dataSource
}
},
}
</script>
<style lang="scss" scoped>
.date-background {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1111;
}
.date-gray-background {
position: absolute;
width: 100%;
top: 0rpx;
background: rgba(0, 0, 0, .5);
height: calc(100% - 500rpx);
}
.date-container {
position: absolute;
width: 100%;
height: 60%;
overflow: hidden;
background: #fff;
bottom: 0;
z-index: 1000;
}
.date-confirm {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx;
font-size: 34rpx;
line-height: 100rpx;
z-index: 2;
// line-height: 70rpx;
// color: var(--ThemeColor)
}
.pickViewColumn {
height: 60%;
/* margin-top: -300rpx; */
}
.indicator {
height: 40rpx;
/* border: 1rpx solid #E5E8E8; */
}
.pickerCancel {
font-size: 30rpx;
color: #606266;
// margin-right: 30rpx;
// padding: 16rpx;
box-sizing: border-box;
text-align: center;
text-decoration: none;
padding: 0rpx 8rpx;
}
.pickerConfirm {
font-size: 30rpx;
color: #2979ff;
// margin-left: 30rpx;
// padding: 16rpx;
box-sizing: border-box;
text-align: center;
text-decoration: none;
padding: 0rpx 8rpx;
}
.u-column-item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 30rpx;
color: #303133;
padding: 0 8rpx;
}
</style>2、在父组件中使用
<template>
<!--父组件-->
<view class="from">
<u-form :model="form" ref="uForm">
<u-form-item label="医院：" label-width="180rpx" prop="hospitalName">
<view class="put" @click="getHospital()">
<u-input placeholder="请选择医院" disabled @click="getHospital()" class="put-w"
v-model="form.hospitalName" />
<u-icon :name="isNation?'arrow-up-fill':'arrow-down-fill'" color="#C0C4CF" size="20"></u-icon>
</view>
</u-form-item>
</u-form>
<!--选择器搜索组件-->
<pickerHospital v-model="isNation" :dataSource='hospitalArr' :pickerValues="[5]" @recload='confirmHospital'></pickerHospital>
</view>
</template>
<script>
export default {
data() {
return {
hospitalArr: [],
form: {},
isNation: false,
};
},
methods: {
async getHospital() {
// 请求接口获取医院列表并将数据处理 打开下拉框
// let res = await getHospitalList({
// status: 1
// })
// if (res.code == 200) {
this.hospitalArr = [{id: 1,name: 'oi99'},
{id: 2,name: 'sss'},
{id: 3,name: 'ovvvi99'},
{id: 4,name: 'hfhgfhfg'},
{id: 5,name: 'dfsdfsdfsdf'},
{id: 6,name: 'fgfhf'},
{id: 7,name: 'azzzzz'},
{id: 8,name: 'fgfg'},
{id: 9,name: 'sadad'},
]
//打开选择器
this.isNation = true
// if (res.data.length > 0) {
// res.data.forEach(item => {
// //将数据处理为对应格式
// this.hospitalArr.push({
// id: item.hospitalId,
// name: item.hospitalName
// })
// })
// }
// }
},
confirmHospital(data) {
console.log(data, '选择的数据')
}
},
}
</script>
<style lang="scss" scoped>
.from {
padding: 20rpx 40rpx;
/deep/.u-form-item {
padding: 10rpx 0;
}
.put-w {
// width: 180rpx;
}
.put {
width: 100%;
padding: 0 8rpx 0 0;
display: flex;
justify-content: space-between;
// border: 2rpx solid #ccc;
border-radius: 10rpx;
// box-sizing: border-box;
}
}
</style>tips：
- 对于输入框搜索后可不用@change事件，用 computed 属性，根据关键词过滤即可
<script>
export default {
// ...
computed: {
list() {
if (!this.searchValue) {
return this.list; // 若未输入关键词，则不进行过滤，返回所有选项
}
return this.list.filter(item=> item.name.includes(this.searchValue)); // 过滤出符合条件的选项并返回
});
}
}
}
</script>