一、效果
二、具体实现
三、代码
<button @click="changeOrg">切换组织</button>
<!-- 选择组织的弹出层 -->
<van-popup v-model="showPicker" round position="bottom" :style="{ height: '60%' }">
<van-search v-model="searchValue" placeholder="请输入搜索组织关键词" shape="round" @search="goSearch" />
<van-picker title="组织" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel"
visible-item-count="8" />
</van-popup>
goSearch() {
this.columns = this.columns.filter((item) => {
return item.includes(this.searchValue)
})
console.log(this.columns);
this.orgList = this.orgList.filter((item) => {
return item.name.includes(this.searchValue)
})
console.log(this.orgList);
},
// 获取当前登录用户所有组织
getUserAllOrg() {
getUserAllOrg({ phone: this.phoneNumber }).then((res) => {
this.orgList = res.data;
this.orgList.forEach((item) => {
this.columns.push(item.name);
});
});
},
// 切换组织
changeOrg() {
this.showPicker = true;
this.columns = []
this.orgList = []
this.getUserAllOrg()
},
// 确认选中组织
onConfirm(value, index) {
this.showPicker = false;
// 得到选中值，赋值给标题，并且刷新列表数据
setWebViewTitle(value);
this.orgId = this.orgList[index].uid;
this.equipList = []
this.currentPage = 1
this.loading = true
this.finished = false
this.getAllEmByDepartment()
},
onCancel() {
this.showPicker = false;
},
----------------------------------------------------------------------------------补充修改
监视搜索框的值，如果为空则重新请求选择器里面的组织数据
搜索框点击清空以后，也重新请求选择器里面的组织数据
