antd-vue 动态渲染表单及对表单进行增删改查_vue ant 动态表单

动态渲染Form表单 antd-vue

 <a-row v-for="(item, index) in superList" :key="index">
                                <a-col :span="9">
                                    <a-input placeholder="请输入负责人姓名" autocomplete="off"
                                        v-decorator="[
                                             `superList[${index}].name`,
                                            , { rules: [{ required: true, message: '请输入负责人姓名' }] }]" />
                                </a-col>
                                <a-col :span="15">
                                    <a-input placeholder="请输入负责人电话" class="phoneItem" autocomplete="off"
                                        v-decorator="[
                                            `superList[${index}].phone`,
                                            , { rules: [{ required: true, message: '请输入负责人电话' }] }]" />
                                    <a class="delBut" v-if="superList.length !== 1" @click="delItem('super', index)">删除</a>
                                </a-col>
                            </a-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

操作

 const { form } = this;
            switch (type) {
                case 'head'://建设负责人
                    const headList = form.getFieldValue('headList');
                    headList.splice(record,1)
                    this.headList.splice(record,1)
                    form.setFieldsValue({
                        headList: headList,
                    });
                    break;
          }
1
2
3
4
5
6
7
8
9
10
11
12