element树形控件编辑节点组装节点

需求功能：

编辑树节点，组装节点

          
            
          
        
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

data () {
    return {
      nodeList: [],
      defaultProps: {
        children: 'childList',
        label: 'investFormCodeText'
      },
      deleteList: [],
    }
  }
1
2
3
4
5
6
7
8
9
10

appendNode (node, data) {
      //为 Tree 中的一个节点追加一个子节点
      this.$refs.tree.append({
        dictKey: "marketQuotationInvestForm",
        investFormCodeText: '',
        childList: []
      }, node)
    },
    editNode (node, data) {
      this.$set(data, "tempInvestFormCodeText", data.investFormCodeText);
      this.$set(data, "investFormCodeText", "");
    },
    removeNode (node, data) {
      const parent = node.parent;
      const childList = parent.data.childList || parent.data;
      const index = childList.findIndex(d => d === data);
      if (data.id) {
        this.$confirm('删除配置项将影响历史数据，请确认是否删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          childList.splice(index, 1);
          this.deleteList.push({
            id: data.id
          });
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
      else {
        childList.splice(index, 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

// 数据结构
"nodeList": [{
		"investFormCodeText": "TF01 -- 搜索广告",
		"investFormCode": "TF01",
		"childList": null,
		"id": 14,
		"investFormCodeDesc": "搜索广告",
		"parentId": 0
	},
	{
		"investFormCodeText": "TF02 -- 开屏",
		"investFormCode": "TF02",
		"childList": [{
				"investFormCodeText": "A001 -- 抖音-开屏",
				"investFormCode": "A001",
				"childList": [{
						"investFormCodeText": "B001 -- 优选互动",
						"investFormCode": "B001",
						"childList": null,
						"id": 17,
						"investFormCodeDesc": "优选互动",
						"parentId": 16
					},
					{
						"investFormCodeText": "B002 -- 优选点击",
						"investFormCode": "B002",
						"childList": null,
						"id": 18,
						"investFormCodeDesc": "优选点击",
						"parentId": 16
					},
					{
						"investFormCodeText": "B003 -- 超级优选",
						"investFormCode": "B003",
						"childList": null,
						"id": 19,
						"investFormCodeDesc": "超级优选",
						"parentId": 16
					}
				],
				"id": 16,
				"investFormCodeDesc": "抖音-开屏",
				"parentId": 15
			},
			{
				"investFormCodeText": "A002 -- 头条-开屏",
				"investFormCode": "A002",
				"childList": [{
						"investFormCodeText": "B001 -- 优选互动",
						"investFormCode": "B001",
						"childList": null,
						"id": 21,
						"investFormCodeDesc": "优选互动",
						"parentId": 20
					},
					{
						"investFormCodeText": "B002 -- 优选点击",
						"childList": null,
						"id": 22,
						"investFormCodeDesc": "优选点击",
						"parentId": 20
					}
				],
				"id": 20,
				"investFormCodeDesc": "头条-开屏",
				"parentId": 15
			}
		],
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
67
68