VUE 之 Jspreadsheet CE电子表格数据处理

冷不防 2022-09-16 03:43 397阅读 0赞

***需求：将表格内容作为list集合，向后端传递  
注意：需求默认展示表格为30行空表格，后端接口会拦截空值，所以需将未输入的行去掉***  
默认的Jspreadsheet ：![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWr5YW5L0hlcnp6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

**实现步骤：**  
获取Jspreadsheet 数据并处理成后端所需参数格式：

var tabdata = this.spreadsheet.options.data //打印表格原始数据如下图1-1
            var Data = []
            var newArr = []
            tabdata.map((v, i) => {  //这里利用几层循环将数据变成list集合，并修改key值,打印如1-2
              var obj = { }
              tabdata[i].forEach((item, index) => { 
                obj[index] = item
              })
              Data.push(obj)
              newArr = Data.map(item => ({ 
                alNum: item['0'],
                width: parseInt(item['1']),
                height: parseInt(item['2']),
                thick: parseInt(item['3']),
                number: parseInt(item['4']),
                unitPrice: item['5'],
                chartNo: item['6'],
                surfaceTreatment: item['7'],
                color: item['8'],
                remark: item['9'],
                installPosition: item['10'],
                measure: parseInt(item['11']),
                amount: parseInt(item['12'])
              }))
              var deleteNullObj = function(arr) { //此方法判断第一列值为空，则去掉该行
    			  for (let i = 0; i < arr.length; i++) { 
    			    if ((arr[i]['alNum']) === '') { 
    			      arr.splice(i, 1)
    			      i--
    			    }
    			  }
    			  return arr
    			}
              deleteNullObj(newArr) //用户输入一行数据，打印结果如1-3

部分图示：  
1-1：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWr5YW5L0hlcnp6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]  
1-2：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWr5YW5L0hlcnp6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]  
1-3:  
![在这里插入图片描述][3e461dfc08d042ae9fa7ffbe956ff2d4.png_pic_center]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWr5YW5L0hlcnp6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]此处做示范输入一条，其他空行自动去除。

**注：表格引入方法可查看上一条文章-----由于本人也是边学习边开发，方法比较老套，欢迎指点！！！**

Jspreadsheet CE功能持续更新中…

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWr5YW5L0hlcnp6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/209afd7565124cc992ae34ecc377fa7b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWr5YW5L0hlcnp6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: /images/20220828/7190aa7467b047ccba683b5e541cf115.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWr5YW5L0hlcnp6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]: /images/20220828/412425b0bd6d422b9c45ea8b6c6a4755.png
[3e461dfc08d042ae9fa7ffbe956ff2d4.png_pic_center]: /images/20220828/70dc51bdd2764197b73a0049887f531d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWr5YW5L0hlcnp6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]: /images/20220828/e1489044c80446a99de888ecfca0708e.png