如何用Vue.js实现可编辑长尾词循环表格功能？

本文共计7079个文字，预计阅读时间需要29分钟。

目录 + Vue用JS实现循环可编辑表格 + 表格的需求 + 简单总结以下是 + Vue用JS实现循环可编辑表格 + 最近项目中需要实现一个复杂的表格，尝试用组件写，半天写不出来，循环真的挺绕的，最后

目录

• vue用js实现循环可编辑表格
• 表格的需求
• 简单总结一下就是

vue用js实现循环可编辑表格

最近项目中需要实现一个很复杂的表格，尝试用组件写，半天写不出来，循环真的好绕，最后直接求助大哥帮我用原生js写了一个。

大哥巴拉巴拉讲了半天，先这样在那样，问我懂了吗

我说懂了！

大哥说那你写吧我看着。

我打开vs table 停住。

大哥说 算了我来吧 你看着。

躺着真好家人们 我是废物。

表格的需求

简单总结一下就是

1.表格需要动态，根据输入的数字显示列数

2.表格可编辑、可禁用、可计算

其实单纯表格可编辑是比较简单的，主要是根据输入的年份显示对应的内容，就需要对表格进行循环，我用组件循环的时候总是出现整行或者整列数据都一起变的情况，所以需要找到可以编辑单元格的方法。

经过测试发现这个表格，原来的大哥也是用js写的，并且写死了30年，你输入之后的年份，也只会出现30年的数据。所以我们直接跟他一样！

我们可以定义一个对象，之后不断地把内容添加进这个对象就可以。

首先在data中定义一个对象，即初始化的表格对象。