案例
<template>
<div>
<!--1、 远程搜索 -->
<!-- filterable、remote、remote-method、loading、label-in-value-->
<Select
v-model="searchData.styleId"
filterable
clearable
remote
: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>
import m_auth from '@/../mixins/auth'
export default {
name: 'initialTest',
mixins: [m_auth],
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>