码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 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

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

  • 相关阅读:
    猿创征文丨深度学习基于双向LSTM模型完成文本分类任务
    离线语音识别PocketSphinx(一)
    (计算机组成原理)第二章数据的表示和运算-第二节2:补码加减运算器和标志位的生成
    最小二乘法在编程中的实现
    案例分析篇12:可靠性设计考点(2024年软考高级系统架构设计师冲刺知识点总结系列文章)
    牛客前端面试题库
    javascript事件处理三 事件委托
    十九章总结 Java绘图
    滴滴可观测平台 Metrics 指标实时计算如何实现了又准又省?
    ASM使用小抄
  • 原文地址:https://blog.csdn.net/agua001/article/details/126342815
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号