Element-ui(Cascader 级联选择器)实现三级联动
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 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 { List findAllprovinces(); }
serviceimpl实现
@Service public class ProvincesServiceImpl extends ServiceImpl implements ProvincesService { @Override public List findAllprovinces() { List allprovince = this.baseMapper.findAllprovince(); return allprovince; } }
mapper层实现
映射省下面所有的市
/** * @Author 爱吃豆的土豆、 * @Date 2023/3/10 10:33 */ @Mapper public interface ProvincesMapper extends BaseMapper { @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 findAllprovince(); }
映射市下面所有的县
/** * @Author 爱吃豆的土豆、 * @Date 2023/3/10 10:35 */ @Mapper public interface CitiesMapper extends BaseMapper { @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 findAllCity(@Param("provinceid") Integer provinceid); }
查询所有的区县
/** * @Author 爱吃豆的土豆、 * @Date 2023/3/10 10:33 */ @Mapper public interface AreasMapper extends BaseMapper { @Select("SELECT * FROM med_areas WHERE cityid = #{cityid}") public List 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 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 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 级联选择器,进行回显操作
级联选择器
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官网级联选择器示例:
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。