您现在的位置是：网站首页> 编程资料编程资料

vue中用js如何实现循环可编辑表格_vue.js_

2023-05-24 323人已围观

简介 vue中用js如何实现循环可编辑表格_vue.js_

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

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

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

我说懂了！

大哥说那你写吧我看着。

我打开vs table 停住。

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

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

表格的需求

简单总结一下就是

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

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

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

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

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

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

前两列的表格我们可以直接写死，从合计开始需要进行循环，所以我们直接从合计开始，合计下再分收入和支出，收入和支出的元素直接根据公式来（改成小写是因为后端接收数据不区分大小写，发大写没用）

还定义了当前年份count，属性名数组keys，和计算的几个公式。

data () { return { // 初始化的表格对象 tableData: { "合计": { 'income': { 'a': 0.00, 'h': 0.00, 'i': 0.00, 'j': 0.00, 'k': 0.00, 'l': 0.00, 'm': 0.00, 'b': '--', 'n': '--', 'o': '--', 'p': '--', 'q': '--', 'c': 0.00, 'r': 0.00, 's': 0.00, 't': 0.00, 'd': '--', 'u': '--', 'v': '--', 'w': '--', 'x': '--', 'e': '--', 'f': '--' }, 'expend': { 'a': '--', 'h': '--', 'i': '--', 'j': '--', 'k': '--', 'l': '--', 'm': '--', 'b': 0.00, 'n': 0.00, 'o': 0.00, 'p': 0.00, 'q': 0.00, 'c': '--', 'r': '--', 's': '--', 't': '--', 'd': 0.00, 'u': 0.00, 'v': 0.00, 'w': 0.00, 'x': 0.00, 'e': 0.00, 'f': 0.00 } }, }, // 表格对象属性名数组keys keys: [], // 填写的年份 默认显示五年 showYear: 5, // 当前年度 count: new Date().getFullYear(), // 收入keys a的计算 incomeKeys: ['h', 'i', 'k', 'l', 'm'], // 支出keys b的计算 expendKeys: ['n', 'o', 'p', 'q'], // 收入keys c的计算 incomeKeys2: ['r', 's', 't'], // 支出keys d的计算 expendKeys2: ['u', 'v', 'w', 'x'] } }

然后在created中把年份加进去

created() { // 在created元素周期就要生成表格 let tempAttr = null // 往tabledata里循环添加30年的数据 for (let i = 0; i < 30; i++) { tempAttr = this.count + i + '' this.tableData[tempAttr] = { 'income': { 'a': 0.00, 'h': 0.00, 'i': 0.00, 'j': 0.00, 'k': 0.00, 'l': 0.00, 'm': 0.00, 'b': '--', 'n': '--', 'o': '--', 'p': '--', 'q': '--', 'c': 0.00, 'r': 0.00, 's': 0.00, 't': 0.00, 'd': '--', 'u': '--', 'v': '--', 'w': '--', 'x': '--', 'e': '--', 'f': '--' }, 'expend': { 'a': '--', 'h': '--', 'i': '--', 'j': '--', 'k': '--', 'l': '--', 'm': '--', 'b': 0.00, 'n': 0.00, 'o': 0.00, 'p': 0.00, 'q': 0.00, 'c': '--', 'r': '--', 's': '--', 't': '--', 'd': 0.00, 'u': 0.00, 'v': 0.00, 'w': 0.00, 'x': 0.00, 'e': 0.00, 'f': 0.00 }, // 把年份传给后端 object.values只会获取属性值,所以多加一个year属性 'year' : tempAttr } } // Object.keys获取对象的属性名赋值给keys this.keys = Object.keys(this.tableData) },

到这里我们表格就循环好了，接下来画表格

收支类别公式合计{{ keys[index - 1] + '年' }}
{{ index % 2 == 0 ? '支出' : '收入' }}
一、建设资金来源A=H+I+K+L+M
（一）财政安排资金H
（二）地方政府专项债券I
其中：用于资本金J
（三）项目单位市场化融资K
（四）单位自筹资金L
（五）其他资金M
二、项目建设支出B=N+O+P+Q
（一）项目建设成本（不含财务费用）N<
                
                

                

                                            
上一篇：vue3项目中代码出现红色波浪线的问题及解决_vue.js_

                                                                
下一篇：微信小程序实现简易的计算器功能_javascript技巧_

                                    

            
        
        

            
相关内容

            
        

    
    

        

            
点击排行

            
        

        

            
本栏推荐

            
        


        

            
猜你喜欢