element ui级联选择器懒加载的使用（调用自己的接口）以及生成级联选择器所需要的数据结构

一、如果有多级选择，并且每一级都有非常多的选择。此时使用手打进去每一个选择，那是非常麻烦而已没有意义的。因此，本文介绍了两种方法，进行级联选择器的多选择实现。

二、懒加载实现。（懒加载为需要的时候，也就是点击的时候才发起请求进行二级选择的生成）

1、先看官网的示例。

<el-cascader :props="props"></el-cascader>

<script>
  let id = 0; // 声明在外面 如果在data里面声明，props会拿不到值

  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 // 最多到三级子节点 也就是有三级选择 
                })); // 如果两级选择 则为 leaf: level >= 1
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(nodes);
            }, 1000);
          }
        }
      };
    }
  };
</script>

说明：相关的代码看注释。思路为：判断几级目录，生成列表。调用resolve将列表加载进组件。

2、调用自己接口的实现。也就是调用数据库中的数据进行列表展示。特别是区域的选择，更需要这种。

3、代码部分。

props: {
          lazy: true,
          async lazyLoad(node, resolve) {
            const {level} = node;
            
              if (level === 0) {  //一级选择器的生成
                let data = await http({
                  url: http.adornUrl(`/house/getTown`), //人人开源的请求方式
                  method: 'get'
                })
                let nodes = Array.from(data.data.rows).map(item => ({
                  value: item.zjmc,
                  label: item.zjmc    // 生成列表 array.from可以研究研究 真的是好用
                }))
                resolve(nodes)
              }
              else if (level === 1){ // 二级选择器的生成
                let data = await http({
                  url: http.adornUrl(`/house/getVillage/${node.data.value}`),
                  method: 'get'
                })
                let nodes = Array.from(data.data.rows).map(item => ({
                  value: item.xzcmc,
                  label: item.xzcmc,
                  leaf: level >= 1 // 设置为只有二级选择
                }))
                resolve(nodes)
              }
            }

}

还是那句话，实则生成列表放进去而已，懒加载原理就是，判断等级，生成列表，放进去，完成。就是这么easy。

三、普通加载的数据生成。（生成级联选择器所需要的数据结构）。

这种方法有点复杂，对于对象的拼装，得有一定的理解。先看element所需要的数据格式。

options: [{
          value: 'zhinan',
          label: '指南',
          disabled: true,
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }]

这是官网的示例。先理清楚结构。

最外层是一个列表options，列表里面为一个个对象，这个对象是一级选择器。这个对象里面，包括三个属性，value, label, children。注意第三个children。这个为当前选项下的二级选择列表。以此类推。

也就是

options: [
    {
        value: '',
        label: '',
        children: [ // 二级选择器
            {
                value: '',
                label: ''
            }
        ]
    }, // 第一个选项
    {
        value: '',
        label: '',
        children: []
    }
]

关系理清楚后，就可以开始封装数据啦！

先声明几个数据进行待会儿封装：

town: [], // 封装所有一级选择 这个主要用来遍历 通过镇 然后请求获得所有村
viliage: [], // 等同于当前镇下面的二级目录，即children
options: [], // 总数据
select: { // 一级选择
    value: '',
    label: '',
    children: []
  },
childrenSelect: { // 二级选择
    value: '',
    label: ''
  }

这种方式很少用 代码贴出来，不多讲，一步步循环遍历封装。

init:function () {
    let that = this
    loadModules(['esri/tasks/support/Query']).then(([Query]) => {
      const queryTown = new Query()
      queryTown.where = '1=1'
      queryTown.returnGeometry = false
      queryTown.outFields = [ 'ZJMC' ]
      mainMap.town.queryFeatures(queryTown).then(function(queryTownResults){
        // console.log(queryTownResults.features)
        // console.log(queryTownResults.features.length)
        // 遍及26镇
        for (let i = 0; i < queryTownResults.features.length; i++) {
          let currentTown = queryTownResults.features[i].attributes.ZJMC
          let queryViliage = new Query()
          let where = "ZJMC='" + currentTown + "'"
          queryViliage.where = where
          queryViliage.returnGeometry = false
          queryViliage.outFields = [ 'CJMC','ZJMC']
          mainMap.viliage.queryFeatures(queryViliage).then(function(results){
            that.select = {
              value: currentTown,
              label: currentTown
            }
            // 遍历一个镇包含的村
            // console.log(results)
            for (let j = 0; j < results.features.length; j++) {
              // 先填充最内层
              that.childrenSelect = {
                value: results.features[j].attributes.CJMC,
                label: results.features[j].attributes.CJMC
              }
              // 填充中间select层
              that.viliage.push(that.childrenSelect)
              // console.log(that.viliage)
            }
            that.select.children = that.viliage
            // console.log(results)
            // 把对象填充对options
            that.options.push(that.select)
            // 重置viliage里面的数组 不然会一直叠加 对象可以重新赋值 但数组会一直添加
            that.viliage = []
          })


        }
      })


    })
  }

mainMap.town可以理解为只是一个可以搜索获取村镇的featureLayer，这种方法后面没用了，所以没有更改，还是用arcgis server自身的api进行搜索。用后台分组查询速度更好一点，封装也更简单。这种方法应该没什么人用，简单说一说就行，完成。