循环遍历表格数据（可编辑可跨行）

实现一个可编辑功能的表格，具体功能如下：

正常情况下房间号位置只显示房间号，当鼠标移上显示编辑及删除图标，点击编辑显示可编辑输入框，点击输入框里的确认（√），房间号修改成功并返回至展示状态
一层有多个房间，一行放不下需要跨行显示（暂定一行显示10个，不足一行的需要补齐）
当删除到每层的房间数均小于规定的每行展示的房间数时，取所有层的最大值赋值给规定的房间数

定义每行展示的房间数

data: {linesNo: 10
}

格式化数据代码如下

initResultData() {let linesNo = this.linesNo // 每行展示多少房间数let resultDataList = []for(let i in this.floorList) {let thisFloorData = this.floorList[i] // 当前楼层的数据let floor = thisFloorData.floor // 当前楼层let floorId = thisFloorData.floorId // 第几条数据// let lineId = thisFloorData.lineId // 第几行let name = thisFloorData.name // 当前楼层的别称let roomList = thisFloorData.roomList // 当前楼层的房间数组let propertyNo = roomList.length // 当前楼层的房间数量let lines = Math.ceil(propertyNo/linesNo) // 当前楼层要展示多少行// 当前楼层的房间数量为0时需要展示一行if(propertyNo == 0) {lines = 1}// 遍历行数for(let line = 1; line <= lines; line++) {// 每一行显示的数据let floorLineData = {floor: '',  // 楼层floorId: floorId, // 第几条数据lineId: line, // 第几行name: '', // 别称propertyNo: '', // 物业数roomList: [] // 存放房间的数组}// 第一行if(line == 1) {floorLineData.floor = floorfloorLineData.name = namefloorLineData.propertyNo = propertyNo}// 遍历房间// 每一行显示的房间 = 每行显示的数量*（当前行-1）；小于每行显示的数量*行数for(let j = linesNo*(line-1); j < linesNo*line; j++) {if(propertyNo > j) {floorLineData.roomList.push(roomList[j])} else {floorLineData.roomList.push({room: ''})}}resultDataList.push(floorLineData)}this.roomListResult = resultDataList}}

判断房间号被删除后所有层的房间数是否都小于最开始每行展示的房间数linesNo

checkLinesNo() {let roomLengthArr = []let num = 0for(let i in this.floorList) {roomLengthArr[i] = this.floorList[i].roomList.lengthif(this.floorList[i].roomList.length < this.linesNo) {num++}}if(num == this.floorList.length) {roomLengthArr.sort(function(a,b){return b-a;  //降序排列，return a-b; —>升序排列})this.linesNo = roomLengthArr[0]}
}

变量和字符串拼接

1.先定义好变量

data() {return {a:'你好',roomList: [{room: '101'},{room: '102'},{room: '103'}]};
}

2.在字符串中使用${}拼接变量
注意不是单引号，而是两个 ` 号（esc下面的按键）

mounted(){alert(`${this.a}世界`)alert(this.roomNumFn(1, 'room'))
},
methods: {roomNumFn(i,str) {return this.roomList[i][`${str}`] // 用于获取数组中对应变量的值}
}

数组排序

let arr = []
...
arr.sort(function(a,b){return b-a;  // 降序排列// return a-b;  // 升序排列
})

循环遍历表格数据（可编辑可跨行）相关推荐

python list遍历删除_Python中list循环遍历删除数据的正确方法
前言初学Python,遇到过这样的问题,在遍历list的时候,删除符合条件的数据,可是总是报异常,代码如下: num_list = [1, 2, 3, 4, 5] print(num_list) f ...
html js 循环取json数据,JS循环遍历JSON数据的方法
JS循环遍历JSON数据本文提供了 JS 循环 JSON 数据列,以及 JS 循环遍历 JSON 数据的例子,供大家学习参考. 1. json数据的列循环 var len = json.length ...
html中循环生成表格数据,动态生成表格(简单实现)
1.案例分析 1.利用对象生成假的数据,用来模拟数据库的数据. 2.核心算法:利用createElement生成表格(生成 tr , td ),注意逻辑关系. 1.css代码 table th { w ...
java模板变量_java freemarker + word 模板生成 word 文档（变量替换，数据的循环，表格数据的循环，以及图片的替换）...
1,最近有个需求,动态生成 Word 文当并供前端下载,网上找了一下,发现基本都是用 word 生成 xml 然后用模板替换变量的方式 1.1,这种方式虽然可行,但是生成的 xml 是在是太乱了,整理 ...
JAVA Freemarker + Word 模板生成 Word 文档（变量替换，数据的循环，表格数据的循环，以及图片的东替换）...
1,最近有个需求,动态生成 Word 文当并供前端下载,网上找了一下,发现基本都是用 word 生成 xml 然后用模板替换变量的方式 1.1,这种方式虽然可行,但是生成的 xml 是在是太乱了,整理 ...
【工具】Excel表格数据不能编辑
excel文件打开之后不能编辑表格数据,大部分原因是因为工作表设置了保护,在工具栏中找到[审阅]-[撤销工作表保护],输入excel密码,将保护工作表取消就可以了. 不知道excel密码的同学,可以使 ...
Excel表格数据不能编辑？
Excel工作表打开之后发现表格内的数据不能编辑. 这个是因为excel工作表开启了保护工作表功能,就是对表格进行了加密,没有密码的人不能对工作表数据进行修改.是对表格数据的一种保护,防止随意修改,影 ...
Django工程中使用echarts怎么循环遍历显示数据
前言: 后面要开发测试管理平台,需要用到数据可视化,所以研究了一下先看下最后的图吧,单击最上方的按钮可以控制柱状图显隐 views.py # -*- coding: utf-8 -*- from _ ...
Java 导出word文档，遍历表格数据，导出图片
引用:https://www.cnblogs.com/pxblog/p/13072711.html 1.引入maven依赖: <dependency><groupId>cn.a ...

循环遍历表格数据（可编辑可跨行）

循环遍历表格数据（可编辑可跨行）

定义每行展示的房间数

格式化数据代码如下

判断房间号被删除后所有层的房间数是否都小于最开始每行展示的房间数linesNo

变量和字符串拼接

数组排序

循环遍历表格数据（可编辑可跨行）相关推荐

最新文章

热门文章