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

1、vue2 + antd 1

  
    
  

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

  
    
      
    
  

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

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

你可能感兴趣的:(vue+,vite,+,antdv,ant-design,vue,vue3.0项目前期,前端,javascript,开发语言,antd,antd,form,表单组件)