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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<template>
  <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
    <button @click="addType">添加类别</button>
    <div
      v-for="item in form.typeList"
      style="border: 1px solid; width: 60%; margin: 10px auto"
      :key="item"
    >
      <a-form-model-item label="类别">
        <a-select v-model="item.type" placeholder="请选择类别">
          <a-select-option value="类别一">类别一</a-select-option>
          <a-select-option value="类别二">类别二</a-select-option>
        </a-select>
      </a-form-model-item>
      <div
        v-for="(tab, index) in item.tabs"
        style="border: 1px solid; width: 60%; margin: 10px auto"
        :key="tab"
      >
        <a-form-model-item label="姓名">
          <a-input v-model="tab.name" />
        </a-form-model-item>
        <a-form-model-item label="年龄">
          <a-select v-model="tab.age" placeholder="请选择年龄">
            <a-select-option value="年龄一">年龄一</a-select-option>
            <a-select-option value="年龄二">年龄二</a-select-option>
          </a-select>
        </a-form-model-item>
        <button @click="removeTab(tab, item.tabs)">删除个人信息</button>
      </div>
      <button @click="addTab(item.tabs)">添加个人信息</button>
      <button @click="removeType(item)">删除类别</button>
    </div>
    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">提交表单</a-button>
      <a-button type="primary" @click="edit">修改数据</a-button>
    </a-form-model-item>
  </a-form-model>
</template>

<script>
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        typeList: [],
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!", this.form);
    },
    edit() {
      this.form.typeList = [
        {
          type: "类别一",
          tabs: [
            {
              name: "张三",
              age: "年龄一",
            },
            {
              name: "李四",
              age: "年龄二",
            },
          ],
        },
        {
          type: "类别二",
          tabs: [
            {
              name: "王五",
              age: "年龄一",
            },
            {
              name: "三小",
              age: "年龄二",
            },
          ],
        },
      ];
    },
    addTab(tabs) {
      tabs.push({
        name: "",
        age: "",
      });
    },
    removeTab(tab, tabs) {
      let index = tabs.indexOf(tab);
      if (index !== -1) {
        //当没有多余tab时就不再删除
        tabs.splice(index, 1);
      }
    },
    addType() {
      this.form.typeList.push({
        type: "",
        tabs: [],
      });
    },
    removeType(item) {
      let index = this.form.typeList.indexOf(item);
      if (index !== -1) {
        //当没有多余tab时就不再删除
        this.form.typeList.splice(index, 1);
      }
    },
  },
};
</script>