需求:在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>

三级联动的话,就是把省份的方法在城市用一遍,城市的方法在区县用一遍

看到这里基本就可以完成了,如果对你有用的话,记得收藏,点赞,关注。白嫖可不是好习惯!
切记看注释!!
切记看注释!!
切记看注释!!

Logo

前往低代码交流专区

更多推荐