Element-ui(Cascader 级联选择器)实现三级联动-Toy模板网

这篇具有很好参考价值的文章主要介绍了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<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官网级联选择器示例：文章来源地址https://www.toymoban.com/news/detail-516153.html