在这次项目需求中要实现的功能和选择地址的过程是很相似的，就用选择地址的过程来举例：首先是选择省，然后是市，再是某个区。在实际的开发过程中这种场景是很常见的，所以我就分享一下我的实现过程。
效果图
实现过程
实现这个功能需要用到Element这个框架中的Cascader 级联选择器，但是不是那个Cascader 级联选择器都适用于这种场景，其中我选择了Cascader 级联选择器中的动态加载选择器，链接 --> 添加链接描述 这个选择器的好处就像你看到的那样它可以：动态加载，这也就意味着可以把我们的数据动态的接入到选择器当中，体验就很好。
代码
HTML:
<el-cascader ref="cascader" :props="casProps" style="width:300px" filterable :options="projectAllList" clearable @change="handleChange"> </el-cascader>JS:
data () { return { projectAllList: [{ projectId: '', projectName: '', name:'' }], casProps: { value: 'projectId', label: 'projectName', lazy: true, // 此处必须为true lazyLoad: (node, resolve) => { if (node.data.projectId && node.level == 1) this.getChildProject(node.data, resolve) //node指的是当前点击的节点，通过判断node.level的数值来确定需要触发的事件，和需要请求的接口。在这里就是当点击的当前节点为第一层时就触发getChildProject这个事件 if (node.data.projectId && node.level == 2) this.getChildProjectname(node.data, resolve)//同上 } }, } } methods: { handleChange (value) { if (value.length > 0) { // 获取当前选中节点 let checkNode = this.$refs['cascader'].getCheckedNodes() // 将当前选中节点数据和当前路径数组返回给父组件 this.$emit('getData', checkNode[0].data, checkNode[0].pathLabels) } else { this.$emit('getData', {}, []) } }, // 获取第一层数据 getProjectList () { const params = { currentPage: 1, pageSize: 999 } this.$api.getAdmin_RegionList(params).then((res) => { if (res.code == 200) { const list = res.data.list this.projectAllList = list.map(el => { return { projectId: el.id, projectName: el.name, leaf: false //这个变量很重要，是用于决定是否结束选择的，当设置为false时则是选择加载下一层 } }) } else { this.$notify({ title: '提示', message: res.message || '获取区域列表失败', offset: 80, type: 'error' }) } }) }, // 获取二层数据 getChildProject (data, resolve) { let params = { currentPage: 1, pageSize: 999, id: data.projectId } this.childProjects = [] this.$api.getGridList(params).then(res => { if (res.code == 200) { const list = res.data.list let childProjects = list.map(el => { return { projectId: el.id, projectName: el.name, leaf: false// 设置为false时则是选择加载下一层 } }) // 将childProjects渲染到第二层的选择器例 resolve(childProjects) } else { this.listLoading = false this.$notify({ title: '提示', message: res.message || '获取网格列表失败', offset: 80, type: 'error' }) } }).catch(error => { // 此处调用resolve 防止接口数据异常时级联选择器一直处于加载状态 resolve(childProjects) }) }, // 获取三层数据 略（记住设置leaf: true即可在第三层结束选择，不进行下一层的加载） }