Avue搜索栏自定义二级联动

最新推荐文章于 2024-08-20 11:29:48 发布

原创

最新推荐文章于 2024-08-20 11:29:48 发布 · 8.2k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍了如何在Avue框架中定制搜索栏，实现实时的省市区联动功能，包括使用插槽、V-model绑定、数据交互及事件处理，适用于满足特定需求的项目开发。

需求：在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
现在就是请求接口获取省份

--------------------这是上面的代码，然后进行修改------------

最低0.47元/天解锁文章