Vue+element-ui的el-cascader实现动态添加/删除级联地点输入框

1. 需求

• 实现省市区三级地点级联选择，可联想；
• 包括始发地点、途径地点、终止地点，始发地点、终止地点均为一个，途径地点可以没有也可以是多个；
• 用户可以动态添加/删除途径地点。

2. 场景说明

• 使用级联选择器Cascader需要的树形数据，前端请求到后端获取省市区数据并处理为elementui官网示例的树形数据格式，如下所示，为节省篇幅树形数据示例只展示部分；

  [
      {
          children: [
              {
                  children: [
                      {
                          label: "东城区"
                          value: "110101"
                      },
                      {
                          label: "西城区"
                          value: "110102"
                      },
                      ...
                  ]
                  label: "北京市"
                  value: "110100"
              },
              ...
          ]
          label: "北京市"
          value: "110000"
      },
      ...
  ]
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25

3. 实现代码

3.1 表单结构

  
    
      
      
      添加途经地点
    


    

    
      
      
    
  

  
    提交

    清空
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

3.2 script结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

3.3 需要注意的点

• 使用elementui的级联选择器Cascader来实现地点级联输入框，通过属性filterable设置是否可搜索；
• 因为我需要提交表单时给后端传入用"-"分割的路线字符串，为了方便，在动态添加途径地点输入框时push了时间戳作为key,这样输入地点和修改地点时不会乱，并且Object中默认以key顺序排序的，所以提交时只需要遍历存储地点数据的Object即可；
• Cascader选择触发后，获得的是地点树状数据districtList中的value数组，但我们需要的是label，这里可以尝试使用方法getCheckedNodes()[0].pathLabels获取，但我这里还是调用后端接口根据value值查询的。
• 如果需要回显，根据value数组回显地点。