• 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
    },
    
    • 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
    
      
        
          
        
      
    
    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

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

  • 相关阅读:
    BootLoader-UDS刷写流程
    [MATLAB]数值计算
    AI伦理:如何确保人工智能的公平与透明
    5G 速率介绍
    Rdt2.1 和 Rdt2.2的详细解释
    C到C++的过渡
    Plato Farm有望通过Elephant Swap,进一步向外拓展生态
    卫星载荷放大器性能研究与波形体制选择
    成功解决OSError: [WinError 1455] 页面文件太小,无法完成操作
    数字化时代的新里程碑:Web3的革命
  • 原文地址:https://blog.csdn.net/agua001/article/details/126342815