闽ICP备2020022160号-5
篇首语：本文由小编为大家整理，主要介绍了Element-ui(Cascader 级联选择器)实现三级联动相关的知识，希望对你有一定的参考价值。
市区表：
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;
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;
级联选择器
<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官网级联选择器示例：
最近产品要求做一个省市区选择，效果就建议使用element-UI的cascader级联，这也是我第一次使用此插件，但要在原cascader级联基础上加一个“全选”按钮，查看官方文档没有关于全选功能属性设置。搜索也没找到好的方法解决。最后请教一个大牛，下面是实现全选的方法.
(官方文档地址：https://element.eleme.cn/#/zh-CN/component/cascader)
方法就是：从树结构中抽出数据。变与model结构就可以了。
需要引用（官方可下载）：<script src="js/vue.js"></script><script src="js/index.js"></script> <link rel="stylesheet" href="css/index.css">JS代码：
var data = [{ id: 1, name: \"东南\", children: [{ id: 2, name: \"上海\", children: [ { id: 3, name: \"普陀\" }, { id: 4, name: \"黄埔\" }, { id: 5, name: \"徐汇\" } ] }, { id: 7, name: \"江苏\", children: [ { id: 8, name: \"南京\" }, { id: 9, name: \"苏州\" }, { id: 10, name: \"无锡\" } ] }, { id: 12, name: \"浙江\", children: [ { id: 13, name: \"杭州\" }, { id: 14, name: \"宁波\" }, { id: 15, name: \"嘉兴\" } ] }]}, { id: 17, name: \"西北\", children: [{ id: 18, name: \"陕西\", children: [ { id: 19, name: \"西安\" }, { id: 20, name: \"延安\" } ] }, { id: 21, name: \"新疆维吾尔族自治区\", children: [ { id: 22, name: \"乌鲁木齐\" }, { id: 23, name: \"克拉玛依\" } ] }]}];var Main = { data() { return { check: false, casVal: [], quchong: [], props: { multiple: true, value: \"id\", label: \"name\" }, options: data }; }, computed: { allCheckValues() { var model = [] function tree2arr(arr, str, level) { arr.forEach(it => { let newStr = str.length ? [...str, it.id] : [it.id]; if (it.children) { tree2arr(it.children, newStr, level + 1) } else { model.push(newStr) } }) } tree2arr(this.options, [], 0) return model }, }, methods: { onCheck(v) { this.casVal = v ? this.allCheckValues : [] console.log(this.casVal) }, handleChange(value) { let selectVal = value; this.allCheckValues.length==selectVal.length?this.check = true : this.check = false; console.log(selectVal, \"选中的vlaue值\") }, }};var Ctor = Vue.extend(Main)new Ctor().$mount(\"#app\")以上是关于Element-ui(Cascader 级联选择器)实现三级联动的主要内容，如果未能解决你的问题，请参考以下文章
闽ICP备2020022160号-5