[TOC]

ps:如果有此类需求，建议用别的方式解决，此方法存在一些问题，而且体验不好。可以考虑接口做数据缓存同步等。

基于Element v2.4.5。
省市区三级数据动态加载，多选，支持回显。

每一项的数据格式：

{
  disName: "广东省"
  disCode: 101002001000000000
}

下面的文件无法直接运行，只提供思路。
保存时的数据格式： [[省disCode, 市disCode, 区disCode],[省disCode, 市disCode, 区disCode]]
回显时的数据格式同保存时的格式。

回显思路：

  1. 根据选中的值获取与值相关的所有选项
  2. 将选项设置到nodes中，即cascade中保存选项的数组中（parentNode.appendNodes()）
  3. 设置选中状态（currentNode.doCheck()）
  4. 设置输入框中显示的值（cascadeRef.computePresentContent()）

代码逻辑：

  1. 加载组件时，默认调用getAreaData获取省的数据
  2. 调用initAreaData，如果是编辑，即value有值，继续下面的步骤
  3. 调用queryAreaListByDisCode，获取选择的disCode的所有下级数据
  4. 遍历回显的值value，如果是最后一级，则是叶子节点，childIsLeaf = true，如果是倒数第二级，则此项的children为叶子节点，leaf = true
  5. 调用handleDisCode，如果是叶子节点，找到currentNode，执行doCheck方法，处理页面上的选中状态；如果是倒数第二级，给数据加上 leaf: true, 表明children是叶子节点。执行appendNodes，将数据插入到disCode对应的节点（即parentNode）的children中，并将parentNode的loaded设置为true，防止点击节点时再次加载
  6. 数据都插入完成后，cascade组件的store中，nodes即保存了节点之间的关系
  7. 调用cascade的computePresentContent方法，获取选中的值，设置到输入框中
    cascade的store中的nodes格式: [Node,Node,Node]
Node: {
 value: disCode,
label: disName,
data: {
 disCode: '',
 disName: '',
 leaf?: true,     // leaf为true表明为叶子节点
},
children: [Node, Node]
}
    ```vue

```