Element-ui(Cascader 级联选择器)实现三级联动

Bertha 。 2023-10-04 23:17 7阅读 0赞

### 1：将省市县数据三张表存放到数据库中 ###

市区表：

CREATE TABLE `med_cities` (
      `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
      `cityid` char(6) NOT NULL COMMENT '城市编码',
      `city` varchar(40) NOT NULL COMMENT '城市名称',
      `provinceid` char(6) NOT NULL COMMENT '所属省份编码',
      PRIMARY KEY (`id`) USING BTREE
    ) ENGINE=InnoDB AUTO_INCREMENT=346 DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT COMMENT='城市信息表';

县区表：

CREATE TABLE `med_areas` (
      `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
      `areaid` char(6) NOT NULL COMMENT '区县编码',
      `area` varchar(40) NOT NULL COMMENT '区县名称',
      `cityid` char(6) NOT NULL COMMENT '所属城市编码',
      PRIMARY KEY (`id`) USING BTREE
    ) ENGINE=InnoDB AUTO_INCREMENT=3145 DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT COMMENT='区县信息表';

省级表：

CREATE TABLE `med_provinces` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `provinceid` int(11) NOT NULL,
      `province` varchar(100) NOT NULL DEFAULT '',
      PRIMARY KEY (`id`) USING BTREE
    ) ENGINE=MyISAM AUTO_INCREMENT=392 DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC;

### 2：在后端处理省市县所对应的数据 ###

Controller层：

/**
     * @Author 爱吃豆的土豆、
     * @Date 2023/3/10 10:45
     */
    @RestController
    @RequestMapping("/provinces")
    public class ProvincesController {
        @Resource
        private ProvincesService provincesService;
    
        @GetMapping
        public BaseResult findAllprovinces(){
            List<MedProvinces> provincesList = provincesService.findAllprovinces();
            if (provincesList != null){
                return BaseResult.ok("查询成功",provincesList);
            }else {
                return BaseResult.error("查询失败");
            }
        }
    }

service层

/**
     * @Author 爱吃豆的土豆、
     * @Date 2023/3/10 10:46
     */
    public interface ProvincesService extends IService<MedProvinces> {
        List<MedProvinces> findAllprovinces();
    }

serviceimpl实现

@Service
    public class ProvincesServiceImpl extends ServiceImpl<ProvincesMapper,MedProvinces> implements ProvincesService {
    
        @Override
        public List<MedProvinces> findAllprovinces() {
            List<MedProvinces> allprovince = this.baseMapper.findAllprovince();
            return allprovince;
        }
    }

mapper层实现

映射省下面所有的市

/**
     * @Author 爱吃豆的土豆、
     * @Date 2023/3/10 10:33
     */
    @Mapper
    public interface ProvincesMapper extends BaseMapper<MedProvinces> {
        @Select("select * from med_provinces")
        @Results({
                @Result(property = "id",column = "id"),
                @Result(property = "provinceid",column = "provinceid"),
                @Result(property = "province",column = "province"),
                @Result(property = "children",column = "provinceid",many = @Many(select = "com.czxy.medical.mapper.CitiesMapper.findAllCity"))
        })
        public List<MedProvinces> findAllprovince();
    
    }

映射市下面所有的县

/**
     * @Author 爱吃豆的土豆、
     * @Date 2023/3/10 10:35
     */
    @Mapper
    public interface CitiesMapper extends BaseMapper<MedCities> {
        @Select("SELECT * FROM med_cities WHERE med_cities.provinceid = #{provinceid}")
        @Results({
                @Result(property = "id",column = "id"),
                @Result(property = "cityid",column = "cityid"),
                @Result(property = "city",column = "city"),
                @Result(property = "provinceid",column = "provinceid"),
                @Result(property = "children",column = "cityid",many = @Many(select = "com.czxy.medical.mapper.AreasMapper.findAllArea"))
        })
        public List<MedCities> findAllCity(@Param("provinceid") Integer provinceid);
    
    
     }

查询所有的区县

/**
     * @Author 爱吃豆的土豆、
     * @Date 2023/3/10 10:33
     */
    @Mapper
    public interface AreasMapper extends BaseMapper<MedAreas> {
        @Select("SELECT * FROM med_areas WHERE cityid = #{cityid}")
        public List<MedAreas> findAllArea(@Param("cityid") Integer cityid);
    
    }

对应的省JavaBean

@Data
    @TableName(value = "med_provinces")
    public class MedProvinces {
      @TableId(type = IdType.AUTO,value = "id")
      private Integer id;
    
      @JsonProperty("value")
      @TableField(value = "provinceid")
      private Integer provinceid;
    
      @JsonProperty("label")
      @TableField(value = "province")
      private String province;
    
      @TableField(exist = false)
      private List<MedCities> children = new ArrayList<>();
    }

对应市JavaBean

@Data
    @TableName(value = "med_cities")
    public class MedCities {
      @TableId(type = IdType.AUTO,value = "id")
      private Integer id;
    
      @JsonProperty("value")
      @TableField(value = "cityid")
      private Integer cityid;
    
      @JsonProperty("label")
      @TableField(value = "city")
      private String city;
    
      @JsonProperty("pid")
      @TableField(value = "provinceid")
      private Integer provinceid;
    
      @TableField(exist = false)
      private List<MedAreas> children = new ArrayList<>();
    }

对应的县区JavaBean

@Data
    @TableName(value = "med_areas")
    public class MedAreas {
      @TableId(value = "id", type = IdType.AUTO)
      private Integer id;
    
      @JsonProperty("value")
      @TableField(value = "areaid")
      private String areaid;
    
      @JsonProperty("label")
      @TableField(value = "area")
      private String area;
    
      @TableField(value = "cityid")
      private Integer cityid;
    
    
    }

### 3：Cascader 级联选择器，进行回显操作 ###

级联选择器

<el-cascader
                        v-model="value"
                        :options="placeList"
                        size="medium"
                        :props="{
                          expandTrigger: 'hover',
                        }"
                        @change="handleChange">
                      </el-cascader>

data() {
        return {
          value: [],
          placeList: []
        };
      },

方法：

methods: {
        handleChange(value) {
          console.log(value);
        },
        async findAllplaceFn() {
          let {data: baseResult} = await this.$request.findAllplace()
          this.placeList = baseResult.data
        }
      },

注意：级联选择器需要保持和后端映射保持一致回显数据

element-ui官网级联选择器示例：

![66e6af9f4d914cdbad6828bee91e75c9.png][]

![5b4277cb2eec4c2898f7a0fd43d8a5bf.png][]

[66e6af9f4d914cdbad6828bee91e75c9.png]: https://img-blog.csdnimg.cn/img_convert/66e6af9f4d914cdbad6828bee91e75c9.png
[5b4277cb2eec4c2898f7a0fd43d8a5bf.png]: https://img-blog.csdnimg.cn/img_convert/5b4277cb2eec4c2898f7a0fd43d8a5bf.png