1.效果

2.官网

https://element.eleme.cn/#/zh-CN/component/cascader

3.动态加载（官网）

<el-cascader :props="props"></el-cascader><script>let id = 0;export default {data() {return {props: {lazy: true,lazyLoad (node, resolve) {const { level } = node;setTimeout(() => {const nodes = Array.from({ length: level + 1 }).map(item => ({value: ++id,label: `选项${id}`,leaf: level >= 2}));// 通过调用resolve将子节点数据返回，通知组件数据加载完成resolve(nodes);}, 1000);}}};}};
</script>

4.使用实例

（1）页面

<el-form-item label="行政区划" prop="divisionCode"><el-cascader :props="props" v-model="form.divisionCode" style="width: 100%;"></el-cascader>
</el-form-item><script>export default {data() {return {props: {lazy: true,lazyLoad (node, resolve) {let value=node.value==undefined?"":node.value;findAll(value).then(res=>{const nodes=res.data;// 通过调用resolve将子节点数据返回，通知组件数据加载完成resolve(nodes);})}},};}};
</script>

（2）后端

/*** 查询行政区划列表*/
@GetMapping("/findAll")
public AjaxResult findAll(@RequestParam("code") String code) {List<DivisionVo> list = tDivisionService.selectDivisionList(code);return AjaxResult.success(list);
}@Data
public class DivisionVo {@Schema(description = "区划编码")private String value;@Schema(description = "区划名称")private String label;@Schema(description = "是否有下级：false=有，true=没有")private Boolean leaf;
}<select id="selectDivisionList" resultType="com.ruoyi.expertveteran.vo.DivisionVo">SELECT`code` VALUE,short_name label,leafFROMt_divisionWHERE<if test="code!=null and code!=''">parent_code =#{code}</if><if test="code==null or code==''">parent_code IS NULL</if>
</select>

5.使用实例（封装组件）

（1）组件 components下创建目录DivisionCascader，DivisionCascader下创建index.vue，代码如下

参考：https://blog.csdn.net/Binglianxiaojiao/article/details/143017798

各种问题参考：el-cascader 动态加载选项、编辑时数据回显问题 、单选不加载下一级节点、点击标签选中

<template><el-cascader :value="value" :props="props" @change="handleChange" style="width: 100%;" clearable filterable placeholder="请选择行政区划"/>
</template><script>
import {findAll} from "@/api/expertveteran/division";export default {model: {prop: 'value',event: 'change'},props: {value: {type: Array,default: () => []}},data() {return {props: {lazy: true,checkStrictly: true,lazyLoad (node, resolve) {let value=node.value==undefined?"":node.value;findAll(value).then(res=>{const nodes=res.data;// 通过调用resolve将子节点数据返回，通知组件数据加载完成resolve(nodes);})}},}},methods: {handleChange(val) {this.$emit('change', val);//单选时加载下级数据this.$nextTick(() => {const dom = document.getElementsByClassName("el-radio is-checked");//这里我把dom打出来看了 最后一个选项才是我选中的节点 即[length-1] 有的博主写的是 第一个元素 即[0] 大家自行尝试let radioDom = dom[dom.length - 1];const brother = radioDom.nextElementSibling;brother.click();});}}
}
</script><style>
/*单选的级联选择器，点击标签页就可以选中，不用可以去掉*/
.el-cascader-menu .el-radio {display: table;vertical-align: middle;width: 100%;height: 100%;position: absolute;box-sizing: border-box;margin-left: -25px;padding-left: 15px;margin-top: 6px;
}
.el-cascader-menu .el-radio .el-radio__input {display: table-cell;vertical-align: middle;
}
</style>

（2）main.js

import DivisionCascader from "@/components/DivisionCascader"// 全局组件挂载
Vue.component('DivisionCascader', DivisionCascader)

(3)使用

<el-form-item label="行政区划" prop="divisionCode"><division-cascader v-model="form.divisionCode"/>
</el-form-item>

(4)其他相关

division.js

import request from '@/utils/request'// 查询行政区划列表
export function findAll(code) {return request({url: '/expertveteran/division/findAll?code='+code,method: 'get',})
}// 编码处理
export function handleCode(code) {if (Array.isArray(code)){return code[code.length-1]}if (code.length==6){return [code.substr(0,2),code.substr(0,4),code.substr(0,6)]}if (code.length==9){return [code.substr(0,2),code.substr(0,4),code.substr(0,6),code.substr(0,9)]}
}

编码处理

import {handleCode} from "@/api/expertveteran/division";
/** 修改按钮操作 */
handleUpdate(row) {this.reset();const id = row.id || this.idsgetExpertInfo(id).then(response => {this.form = response.data;this.form.divisionCode=handleCode(this.form.divisionCode);this.open = true;this.title = "修改专家信息";});
},
/** 提交按钮 */
submitForm() {this.$refs["form"].validate(valid => {if (valid) {this.form.divisionCode=handleCode(this.form.divisionCode)if (this.form.id != null) {updateExpertInfo(this.form).then(response => {this.$modal.msgSuccess("修改成功");this.open = false;this.getList();});} else {addExpertInfo(this.form).then(response => {this.$modal.msgSuccess("新增成功");this.open = false;this.getList();});}}});
},

编辑不回显数据

<el-form-item label="行政区划" prop="divisionCode"><division-cascader v-model="form.divisionCode" v-if="editCascaderVisible"/>
</el-form-item>
<script>
return {editCascaderVisible:true,
}
/** 修改按钮操作 */
handleUpdate(row) {this.reset();const userId = row.userId || this.ids;getUser(userId).then(response => {this.form = response.data;// 这里搞个定时器重新载入一下组件就可以触发组件拉取数据this.editCascaderVisible = false;setTimeout(() => {this.form.divisionCode=handleCode(this.form.divisionCode);this.editCascaderVisible = true;}, 1);});
},
</script>