element ui plus 级联动态加载

Element UI Plus的级联动态加载可以通过配置props中的lazy为true来实现。在data中定义treeOption对象，其中包括lazyLoad方法，该方法在每个级联节点展开时会被调用。在lazyLoad方法中，通过接口请求获取相应的数据，并将数据处理成组件所需的格式，然后通过resolve方法返回处理后的数据。在lazyLoad方法中，可以根据节点的level和data来确定请求参数。具体配置可以参考以下代码示例和效果描述：

<el-cascader :props="treeOption" @change="onChange" style="width:300px"></el-cascader>

data () {
  return {
    treeOption: {
      lazy: true,
      checkStrictly: true,
      lazyLoad (node, resolve) {
        const id = (node.level === 0) ? 0 : node.data.id;
        getDeptLazyTree(id).then(res => {
          resolve(res.data.data.map(item => {
            return {
              ...item,
              leaf: !item.hasChildren
            }
          }));
        });
      },
      label: 'title',
      value: 'id',
      children: 'children'
    }
  }
},
methods: {
  onChange(val) {
    this.model.useDeptId = val[val.length-1];
  },
}

效果如下：
- 点击江苏省返回的数据
- 点击无锡返回的数据
其中，点击级联选择器的label也可以选中，可以通过添加以下样式实现：

.el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 10px;
  right: -10px;
}
.el-cascader-panel .el-radio__input {
  // visibility: hidden;
  //隐藏单选框，不隐藏就不用设置
}
.el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}

通过以上配置，可以实现Element UI Plus的级联动态加载功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>