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

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
},
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);
    })
};

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

  • 0
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

心若向阳(* ̄︶ ̄)

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值