vue + iview + select + 本地搜索或远程搜索

案例

<template><div><!--1、 远程搜索 --><!-- filterable、remote、remote-method、loading、label-in-value--><Selectv-model="searchData.styleId"filterableclearableremote:remote-method="remoteMethod":loading="loading"label-in-value@on-change="hanleStyleChange"placeholder="请输入或选择"ref="setStyle"><!-- 注意绑定的label和value --><Option v-for="(item, index) in dropList.StyleList" :value="item.Id" :key="index" :label="item.Name">{{ item.Name }}</Option></Select><!--2、 本地搜索：先选仓库，再选库位，联动 --><p>仓库</p><Select v-model="searchData.wareHouseId" filterable clearable @on-change="hanleHouseChange" @on-clear="handleHouseClear" ref="setHouseQuery"><Option v-for="item in dropList.WareHouseList" :value="item.Id" :key="item.Id" :label="item.Name"/></Select><p>库位</p><Select v-model="searchData.wareShelfId" filterable clearable @on-clear="handleShelfClear" ref="setShelfQuery"><Option v-for="item in dropList.WareShelfList" :value="item.Id" :key="item.Id" :label="item.Name"/></Select><p @click="edit">弹窗编辑仓库库位时</p>
</template>
<script>export default {name: 'initialTest',data(){return{loading: false,searchData: {styleId: '',wareHouseId: '',wareShelfId: '',},dropList: {StyleList: [],WareHouseList: [],WareShelfList: []},afterData: [],formAdd: {WareHouseId: '',WareHouseName: '',WareShelfId: '',WareShelfName: '',},}},activated() {this.getDropHouse();},methods: {remoteMethod (query) {if (query !== '') {this.loading = true;this.getDropStyle(query);} else {this.dropList.StyleList = [];}},//远程获取款式数据getDropStyle (query) {//当query != ''  时请求获取数据let afterData =  [{"Id":"3db8b88b-ba44-4553-801e-3a2ebcbef4b7","StyleName":"款名111","StyleNumber":"款号111"},{"Id":"929f4880-68ed-4803-8811-3eda092d594c","StyleName":"款名110","StyleNumber":"款号110"},{"Id":"ae36eda5-bc94-4d8a-893a-4623d0d9965a","StyleName":"款名113","StyleNumber":"款号113"},{"Id":"d89b636e-46a5-45f3-b0fb-a5eb77230ad8","StyleName":"测试款","StyleNumber":"123"}];this.loading = false;if (afterData && afterData.length > 0) {_.each(afterData , item => {if (item.StyleName) {this.$set(item, 'Name', item.StyleName);}})this.afterData = afterData;} else {this.$refs.setStyle.$data.query = '';this.afterData = []}},//选中option款式中的选项返回的label和value值hanleStyleChange (value) {console.log('vaule------>>', value); //打印出的value ： {//                        label:"款名110"//                       value:"929f4880-68ed-4803-8811-3eda092d594c"//                  }},//获取仓库下拉数据getDropHouse (){this.dropList.WareHouseList = [{"Id":"bc7669b0-d502-4683-8599-9543a6b78015","Name":"华中仓","WareShelfList":null},{"Id":"859aad02-6228-435d-ae67-fe810bc434aa","Name":"华南仓","WareShelfList":[{"Id":"6bafbcb4-6ae7-4fce-849c-8ede4a06303e","Name":"华南小库位"}]}]},//选中仓库option中的选项返回的value值： 默认会读取 slot，无 slot 时，优先读取该 label 值，无 label 时，读取 value。hanleHouseChange (value) {this.dropList.WareShelfList = [];let choiceValue = value;if (this.searchData.wareHouseId) { //value进行的双向绑定：获取到仓库id后，循环匹配到库位下拉数组_.each( this.dropList.WareHouseList, item => {if (choiceValue == item.Id) {this.dropList.WareShelfList = item.WareShelfList;return false                      }});} else {this.$refs.setHouseQuery.$data.query = ''; this.$refs.setShelfQuery.$data.query = '';return false}},handleHouseClear () {this.searchData.wareHouseId = '';this.$refs.setHouseQuery.$data.query = ''; //清除下拉选中的项this.handleShelfClear ()},handleShelfClear () {this.searchData.wareShelfId = '';this.$refs.setShelfQuery.$data.query = '';},edit () {// 请求获取到仓库、库位数据let resData = res.data;if (resData) {//注意： 先对仓库数据赋值，nextTick执行仓库库位数据赋值this.formAdd['WareHouseId'] = resData.WareHouseId; this.$nextTick( () =>{this.formAdd = resData;})}}}}
</script>

vue + iview + select + 本地搜索或远程搜索相关推荐

vue+element实现Select 选择器的远程搜索、滚动加载
1.html结构: <el-selectv-model.trim="query.enEnterpriseBaseId"v-loadmore="loadMore&qu ...
vue + elemen可远程搜索select选择器的封装（思路及源码分享）
目录项目场景: 效果 1.封装下拉列表 2.页面中使用项目场景: 我有很多的Form表单,在Form表单内又有很多的select选择器,这些选择器的下拉列表都是通过后端的接口传回的数据渲染的,如果 ...
iview 远程搜索选择器方法使用，选择之后清空选择的项
vue项目中使用iview远程搜索选择器匹配数据,选择之后,提交数据,继续选择. <Select v-model="associatedCode" filterable re ...
vue实现下拉列表远程搜索示例（根据关键词模糊搜索）
" 大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂 " 前言昨天的链接没有放上去--大家访问新站的时候,可以在浏览器地址栏中输入:www.穆雄雄.com或者www.muxio ...
Vue+Axios+ElementUI 远程搜索问题（返回promise对象问题）
声明下是刚学前端和后端,什么都不会,遇到到坑太多了碰到的问题: 在学习Vue+Axios+ElementUI组合中,实验ElementUI远程返回列到问题,首先因为后端asp.net core ap ...
vue+element表格＜el-select＞远程搜索
为了启用远程搜索,需要将filterable和remote设置为true,同时传入一个remote-method.remote-method为一个Function,它会在输入值发生变化时调用,参数为当 ...
vue+iview实现拼音、首字母、汉字模糊搜索
最近项目做的后台管理系统中,要求实现一个支持拼音.首字母和汉字模糊搜索的下拉框.项目是用vue+iview做的,iview中有select远程搜索.但是,iview框架也有弊病就是会将输入框中的输入值 ...
iview select选中值取值_vue+iview 项目
vue-cli3创建项目 (创建一个项目 | Vue CLI) 1,vue ui (视图创建,会在localhost打开页面,创建项目) 2,vue create hello-world 路由跳转 / ...
iview select选中值取值_iView的Select选择框
目录在此先列出解决了那些问题,以防读者看完了没有用处: 1.示例,最基础的使用方法 2.传参,传多个值的方式 3.默认值 4.清空重置无效 5.可搜索的用法及如何限制搜索字符长度一.示例 html ...

vue + iview + select + 本地搜索或远程搜索

vue + iview + select + 本地搜索或远程搜索相关推荐

最新文章

热门文章