vue2 + antd1.7.8 和 vue3 + antd2.2.8表单动态添加删除表单项_vue3 antd 动态新增表单项

1、vue2 + antd 1

<a-col :span="24" v-for="item in formItem" :key="item.code">
  <a-form-item :label="item.name">
    <a-input v-decorator="[item.code]" :placeholder="`请输入${item.name}`"
    :suffix="item.unit"
    oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,3})?.*$/,'$1')"
    />
  </a-form-item>
</a-col>
async serValues(e){
  if(e.target.value.length < 10) return;
  clearTimeout(this.timer);
  this.timer = setTimeout(async() =>{
    this.loading = true
    let res = await this.$http(this.$url.SEARCH_TAB_FORM_CODE,'get',{deviceCode:e.target.value})
    .finally(()=>{
      this.loading = false
    })
    let {data} = res
    if(data.code == 200){
      this.formItem.length ? this.formItem.splice(0,this.formItem.length, ...data.data) : this.formItem = data.data
    }
  },200)
},
getValues(){
  let query
  this.form.validateFields((err,value)=>{
    if(!err){
      value.labelDataList = this.formItem.map(item=>{
        item.value = value[item.code]
        return item
      })
      value.testTime = value.testTime.format('YYYY-MM-DD HH:mm:ss')
      value.reportSource = 1
      query = value
    }
  })
  return query
},
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

2、vue3 + antd 2

<a-row :gutter="8" v-for="item in formData.formItem" :key="item.code">
  <a-col :lg="24">
    <a-form-item :label="item.name">
      <a-input
        v-model:value="item.value"
        :placeholder="`请输入${item.name}`"
        :suffix="item.unit"
        oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,3})?.*$/,'$1')"
      />
    </a-form-item>
  </a-col>
</a-row>
const setValues = async (data) => {
  if (data) {
    await getItem(data.id);
    formData.deviceCode = data.deviceCode;
  }
};
const getItem = async (id) => {
  deviceid.value = id;
  let res = await request(url.GET_FILL_ITEM_BY_DEVICE_ID, "get", {
    deviceId: id,
  });
  res.map((i) => {
    return formData.formItem.push({
      code: i.code,
      name: i.name,
      unit: i.unit,
      value: "",
      key: i.code,
    });
  }); 
};
const getValues = () => {
  validate()
    .then(() => {
      let data = {};
      data.reportSource = 1;
      data.deviceId = deviceid.value;
      let labelDataList = [];
      formData.formItem.map(i => {
        labelDataList.push({
          code: i.code,
          value: i.value
        })
      });
      data.labelDataList = labelDataList;
      data.testTime = formData.testTime.format('YYYY-MM-DD HH:mm:ss');
      emit('getFillData', data);
    })
};
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

缓缓飘落的枫叶像思念，我点燃烛火温暖岁末的秋天！