卓尔高考网
首页>>高考新闻

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

admin

篇首语：本文由小编为大家整理，主要介绍了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 级联选择器，进行回显操作

级联选择器

                    v-model="value"
                    :options="placeList"
                    size="medium"
                    :props="
                      expandTrigger: hover,
                    "
                    @change="handleChange">
                  
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) 全选 功能

最近产品要求做一个省市区选择，效果就建议使用element-UI的cascader级联，这也是我第一次使用此插件，但要在原cascader级联基础上加一个“全选”按钮，查看官方文档没有关于全选功能属性设置。搜索也没找到好的方法解决。最后请教一个大牛，下面是实现全选的方法.
(官方文档地址：https://element.eleme.cn/#/zh-CN/component/cascader)
方法就是：从树结构中抽出数据。变与model结构就可以了。

需要引用（官方可下载）：

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 级联选择器)实现三级联动的主要内容，如果未能解决你的问题，请参考以下文章

您可能还会对下面的文章感兴趣：

相关文章