表格输入vue 需要传递给接口

Question

我想新增一个表格输入（50多个输入框），将输入数据保存后端 下次点击修改时 可以修改当中的数据

每个输入框都需要输入保存修改

Answer 1

【相关推荐】

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7760783
• 这篇博客也不错, 你可以看下记一次vue遇到的坑，表格发送添加或删除请求并重新请求数据，发现数据并没有同步刷新。
• 您还可以看一下 黄菊华老师的公司移动站点Vue实战课程（配后台，送所有代码）课程中的 微信小程序入门到就业课（全栈课）学习说明【建议看下】小节, 巩固相关知识点
  
• 除此之外, 这篇博客: 防抖、节流一步一步详细讲解，从简单到复杂，从入门到深入了解，再到 Vue 项目中是怎样调用防抖、节流方法的中的 定时器版节流与防抖方法代码逻辑详解说明： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  • 定时器版节流的写法不需要判断 timer 存在的情况清除定时器。
  • 为什么？这是因为就算你清除了定时器，定时器的返回值还是有值，而且 clearTimeout 的作用是什么？是清除setTimeout 里面的代码块，

  点击查看详情 。
• 为什么防抖那里可以加？这是因为防抖那里没有 if (!timer) 这层判断，没有这层判断的话，初次调用的时候是没有清除定时器的，那么定时器里面的代码是会执行的，再次调用的时候，虽然 timer有值，并执行了 clearTimeout(timer)，但是这个是清除了上次的定时器里面的代码块，这次的定时器里面的代码块仍是会执行的，你不断频繁的调用，就会不停的清除上次的定时器，但是最后一次的定时器还是在运行，里面的代码块最终还是会执行，所以也就实现了防抖的功能。
• 而这个定时器版节流代码的话，如果你加了 if(timer) clearTimeout(timer); 并且有这个判断 if (!timer) ，那么在初次调用时，会执行定时器里面的代码，但是如果你快速点击（频繁的调用）的话，这个timer 是有值的，就会执行 if(timer) clearTimeout(timer); 当你执行了 clearTimeout(timer)，也就把初次的定时器里面的这两行代码 timer = null; func.apply(that, args) 清除了，也就是说这个timer 永远都是有值的，也就是永远都不会进入if (!timer) 这个判断分支了，不进入这个判断分支也就不会重置 timer和执行需要节流的函数了，这样失去了封装节流函数的意义了。
  当然，如果你在定义的时间后再调用，也就是说，比如我这边设置的是3秒，如果你在初次调用的3秒后再次调用，也是可以满足条件的，但是这种情况于项目需求应该就是不符合了，所以排除这个可能性。
• 如果加了这个判断的代码解析如下

----------------------------------------错误分割线-------------------------------------------
以下是（反面示例）错误定时器版节流代码，注意注意，不要使用这个！！！

function throttle(func, waitTime) {
    let timer;
    return function() {
        let that = this;
        let args = arguments;
        // 如果你在这一步判断了当定时器返回值timer存在，然后你使用clearTimeout 清掉的话，
        // 意味着，这两行代码不会执行，
        // timer = null;
        // func.apply(that, args) 
        // 且 timer 仍然有值，那么在这个timer 有值的情况下， 
        // if (!timer) 这个判断分支就永远都不会进入，也就代表着永远不会执行需要节流的函数了。

		// 初次不会执行，第二次调用的时候执行了，并清除了上次定时器里面的代码块，
		// timer 没有重新赋值，
		// 所以这个timer 是一直有值的，那么这个 if (!timer) 判断分支就不会进入了。
        if(timer) clearTimeout(timer); 
        if (!timer) {
            timer = setTimeout(() => {
                timer = null;
                func.apply(that, args) // 执行需要节流的函数
            }, waitTime)
        }
    }
}

以上是（反面示例）错误定时器版节流代码，注意注意，不要使用这个！！！
----------------------------------------错误分割线-------------------------------------------

 
 
 
 

 调用方法：

document.getElementById("submitBtn").onclick = throttle(handleSubmit, 3000);

 效果如下：

  
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^