需求：在Avue搜索栏自定义省市联动框
就是这种的省市区多级联动，其实可以用avue-crud来做，但是需求不一样，这里就不多说公司的需求了，反正avue-crud不好实现公司的需求，所以我就使用自定义搜索栏来实现。
如果不了解的还是先去看看avue文档吧
下面我们就来说如何去实现这个需求
切记看注释！！
切记看注释！！
切记看注释！！
1.首先使用slot插槽去添加自定义select框（注意看注释）
- 首先searchslot: true,（意思是开启搜索栏插槽）
- 然后slot对应prop去创建插槽（slot卡槽的名字为prop+Search）
---------------在<template>里面写------------------
<avue-crud
:data="data"
:option="option"
:page.sync="page"
:table-loading="loading"
@on-load="queryList"
@search-change="searchChange"
@search-reset="refresh"
@refresh-change="refresh"
>
<template slot-scope="scope" slot="provinceCodeSearch">
//slot卡槽的名字为prop+Search，对应下面option的column里面的省份
<avue-select
placeholder="请选择省市"
></avue-select>
</template>
<template slot-scope="scope" slot="cityCodeSearch">
//slot卡槽的名字为prop+Search，对应下面option的column里面的城市
<avue-select
placeholder="请选择城市"
></avue-select>
</template>
</avue-crud>
----------------------------------------
-----------------<script>里面写--------------------
data() {
return {
option: {
searchMenuSpan: 24
selection: true,
emptyText: "暂无数据哦~",
searchShow: false,
searchLabelWidth: 100,
column: [
{
hide: true,
showColumn: false,
label: "省份",
prop: "provinceCode",
type: "select",
search: true,
searchslot: true, //使用插槽
},
{
hide: true,
showColumn: false,
label: "城市",
prop: "cityCode",
type: "select",
search: true,
searchslot: true, //使用插槽
},
}
}
}
-----------------------------------------
写到这里，搜索栏会出现你需要的select框
2.页面已经写完了，现在开始写联动了，先让省份出现省名出现在select框里面
- select里面label是显示省份名的，value是你选中返回的值,一定要对应好，(不了解的看一下element的select),例如label：北京，value：100100
- 现在就是请求接口获取省份
--------------------这是上面的代码，然后进行修改------------------
<template slot-scope="scope" slot="provinceCodeSearch">
<avue-select
v-model="objFrom.provinceCode" //这是选择后存进去的value
placeholder="请选择省市"
:dic="ProvinceList" //映射到select里面
></avue-select>
</template>
<template slot-scope="scope" slot="cityCodeSearch">
<avue-select
placeholder="请选择城市"
></avue-select>
</template>
----------------------------------------------
--------------------------------这是上面的代码，然后进行修改--------------------
data() {
return {
ProvinceList:[], //存放省份的地方
objFrom：{
provinceCode:'' //这是选择后存进去的value
},
option: {
searchMenuSpan: 24
selection: true,
emptyText: "暂无数据哦~",
searchShow: false,
searchLabelWidth: 100,
column: [
{
hide: true,
showColumn: false,
label: "省份",
prop: "provinceCode",
type: "select",
search: true,
searchslot: true, //使用插槽
},
{
hide: true,
showColumn: false,
label: "城市",
prop: "cityCode",
type: "select",
search: true,
searchslot: true, //使用插槽
},
}
}
}
created() {
this.getProvinceL();//在生命周期去调用
},
methods: {
// 获取省
async getProvinceL() {
let res = await this.$api.getProvinceList(); //这里是我封装的请求接口的函数
res.data.forEach((item, index) => {
res.data[index].label = item.provinceName; //把后端请求过来的省份放在label里
res.data[index].value = item.provinceCode; //把后端请求过来的省份code放在value里
});
this.ProvinceList = res.data;
},
}
这里就完成了省份的显示
3.现在就是让城市显示出来了
- 给省份绑定一个change事件
- 但是，在avue中使用change事件会发生页面初始化就执行，我们要页面初始化不执行change事件，当省份值改变才去执行
- 还有就是省份选择完去选择城市，之后再去切换省份，会导致城市的select显示的是value。我们只要让现在选择的省份值和上次的值不一样和为空的时候，让城市的select为空就行
----------------------这是上面的代码，然后进行修改---------------
<template slot-scope="scope" slot="provinceCodeSearch">
<avue-select
v-model="objFrom.provinceCode" //这是存放省份的code
placeholder="请选择省市"
:dic="ProvinceList" 映射到select里面
@change="handleProvinceCode" //省份选择后触发的事件
></avue-select>
</template>
<template slot-scope="scope" slot="cityCodeSearch">
<avue-select
v-model="objFrom.cityCode"//这是存放城市的code
placeholder="请选择城市"
:dic="cityCodeList" //映射到select里面
></avue-select>
</template>
---------------------------------------------------------
------------------这是上面的代码，然后进行修改----------------------
data() {
return {
code: "", //存放上次的code
changeFlag: false, //页面初始化不让触发change
ProvinceList:[], //存放所有省份的地方
cityCodeList:[], //存放所有城市的地方
objFrom：{
provinceCode:'' //这是选择后存进去的value
},
option: {
searchMenuSpan: 24
selection: true,
emptyText: "暂无数据哦~",
searchShow: false,
searchLabelWidth: 100,
column: [
{
hide: true,
showColumn: false,
label: "省份",
prop: "provinceCode",
type: "select",
search: true, //显示到search栏
searchslot: true, //使用插槽
},
{
hide: true,
showColumn: false,
label: "城市",
prop: "cityCode",
type: "select",
search: true, 显示到search栏
searchslot: true, //使用插槽
},
}
}
}
created() {
this.getProvinceL();//在生命周期去调用
},
methods: {
// 获取省
async getProvinceL() {
let res = await this.$api.getProvinceList(); //这里是我封装的请求接口的函数
res.data.forEach((item, index) => {
res.data[index].label = item.provinceName; //把后端请求过来的省份放在label里
res.data[index].value = item.provinceCode; //把后端请求过来的省份code放在value里
});
this.ProvinceList = res.data;
},
}
// 获取城市
async handleProvinceCode(value) {
if (this.changeFlag) { //判断是否初始化执行change
// 修改选项时操作
if (value !== this.code) { //判断是否是上次的值，不是的话就清空城市的select
this.code = value; //把现在的值在赋值上
this.objFrom.cityCode = "";
}
if(value.length === 0){
//如果省份的code为空的话就直接不执行下面的函数，也就是省份和城市都为空
return
}
let res = await this.$api.getCityCodeList({ provinceCode: value });//这里是我封装的请求接口的函数
res.data.forEach((item, index) => {
res.data[index].label = item.cityName; //把后端请求过来的省份放在label里
res.data[index].value = item.cityCode;//把后端请求过来的省份code放在value里
});
this.cityCodeList = res.data;
} else {
// 进入页面时，页面初始化
this.changeFlag = true;
}
},
完整代码：其实看上面的代码就可以了
<template>
<basic-container>
<avue-crud>
<template slot-scope="scope" slot="provinceCodeSearch">
<avue-select
v-model="objFrom.provinceCode"
placeholder="请选择省市"
:dic="ProvinceList"
@change="handleProvinceCode"
></avue-select>
</template>
<template slot-scope="scope" slot="cityCodeSearch">
<avue-select
v-model="objFrom.cityCode"
placeholder="请选择城市"
:dic="cityCodeList"
></avue-select>
</template>
</avue-crud>
</basic-container>
</template>
<script>
import {accMul} from '../../util/rules';
var Dic = {
SYQK: [
{ label: "未使用", value: "0" },
{ label: "已使用", value: "1" },
],
};
export default {
data() {
return {
code: "",
changeFlag: false,
ProvinceList: [],
cityCodeList: [],
objFrom: {
provinceCode: "",
cityCode: "",
},
option: {
searchMenuSpan: 24,
selection: true,
searchShow: false,
searchLabelWidth: 100,
column: [
{
hide: true,
showColumn: false,
label: "省份",
prop: "provinceCode",
type: "select",
search: true,
searchslot: true,
},
{
hide: true,
showColumn: false,
label: "城市",
prop: "cityCode",
type: "select",
search: true,
searchslot: true,
},
],
},
};
},
created() {
this.getProvinceL();
},
methods: {
// 获取省
async getProvinceL() {
let res = await this.$api.getProvinceList();
res.data.forEach((item, index) => {
res.data[index].label = item.provinceName;
res.data[index].value = item.provinceCode;
});
this.ProvinceList = res.data;
},
// 获取城市
async handleProvinceCode(value) {
if (this.changeFlag) {
// 修改选项时操作
if (value !== this.code) {
this.code = value;
this.objFrom.cityCode = "";
}
if(value.length === 0){
return
}
let res = await this.$api.getCityCodeList({ provinceCode: value });
res.data.forEach((item, index) => {
res.data[index].label = item.cityName;
res.data[index].value = item.cityCode;
});
this.cityCodeList = res.data;
} else {
// 进入页面时，页面初始化
this.changeFlag = true;
}
}
},
};
</script>
<style></style>
三级联动的话，就是把省份的方法在城市用一遍，城市的方法在区县用一遍
看到这里基本就可以完成了，如果对你有用的话，记得收藏，点赞，关注。白嫖可不是好习惯！
切记看注释！！
切记看注释！！
切记看注释！！
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
