因为表格有部分行内容较多，行高度不一样，所以需要进行计算
思想：每插入一条数据就进行table高度的计算，通过递归自动生成新盒子存放数据，不能进行同步处理，因为同步的话只能监视表格插入数据前后的高度，Vue使用$nextTick也无法监视高度变化，我用的是setTiemou,100
盒子模型
JS写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>傻瓜盒子2.0</title>
<script src="./js/browser.min.js"></script>
<script src="./js/polyfill.min.js"></script>
<style>
.box {
position: relative;
margin: 0 auto;
border: 1px solid;
}
.box .biaotou {
border: 5px solid red;
position: absolute;
top: 0;
margin-bottom: 5px;
}
.box .yewei {
position: absolute;
bottom: 0;
border: 1px solid blue;
margin-top: 5px;
}
.box #table {
margin-top: 210px;
display: inline-block;
white-space: normal;
text-overflow: ellipsis;
border-collapse: collapse;
}
#table #thead_tr td {
width: 200px;
white-space: nowrap;
}
#table #tbody tr td {
word-break: break-all !important;
max-width: 200px;
height: auto;
}
</style>
</head>
<body>
<div class="bigBox" id="bigBox">
<div class="box" style="height:1000px;width:800px;" id="box">
<div class="biaotou" id="biaotou" style="height:200px;width:800px;">
<span>6666</span>
</div>
<table border="1" id="table" class="table1">
<thead id="tablehead">
<tr id="thead_tr">
<td>测量时间（月日时分）</td>
<td>测量地点</td>
<td>测量人 </td>
<td>易燃易爆物名称</td>
<td>测量数据 </td>
</tr>
</thead>
<tbody id="tbody" style="height:500px;width:800px;"></tbody>
</table>
<div class="yewei" id="yewei" style="height:200px;width:800px;">
<span>777</span>
</div>
</div>
</div>
<script type="text/babel">
var arr = []
var go = true //控制能否前进
var boxIndex = 10//随机数，防止table重合
/* 获取table盒子高度 */
let box = document.getElementById('box')
let boxHeight = Number(box.style.height.replace(/px/g, ''))
let biaotou = document.getElementById('biaotou')
let biaotouHeight = Number(biaotou.style.height.replace(/px/g, ''))
let yewei = document.getElementById('yewei')
let yeweiHeight = Number(yewei.style.height.replace(/px/g, ''))
var tableBox = boxHeight - biaotouHeight - yeweiHeight
/* 初始化 */
init(arr, 'table1', true)
function init(arr, className, go) {
let table = document.getElementsByClassName(className)[0] //根据类名获取表格
let tbody = table.children[1] //获取表格tbody原生
arr.forEach((item, index) => {
/* 异步抛出 */
setTimeout(() => {
if (go) {
if (table.offsetHeight < (tableBox - 25)) {
/* 生成新的一行插入表格 */
let tdObj = {}
var tr = document.createElement('tr')
Object.keys(item).forEach(keyItem => {
tdObj[keyItem] = document.createElement('td')
tdObj[keyItem].innerHTML = item[keyItem]
tdObj[keyItem].style = 'word-break:break-all;'
tr.appendChild(tdObj[keyItem])
})
tbody.appendChild(tr)
}
else {
go = false
tbody.removeChild(tbody.lastElementChild) //去除结尾
let xxarr = arr.slice(index - 1) //获取剩下的数组
boxIndex += 10 //避免类名重复
/* 克隆盒子 */
var box = document.getElementById('box').cloneNode(false)
var biaotou = document.getElementById('biaotou').cloneNode(true)
var yewei = document.getElementById('yewei').cloneNode(true)
var newTable = document.getElementById('table').cloneNode(false)
var bigBox = document.getElementById('bigBox')
var newTablehead = document.getElementById('tablehead').cloneNode(true)
var newtbody = document.createElement('tbody')
newTable.className = `init${boxIndex}`
newTable.appendChild(newTablehead)
newTable.appendChild(newtbody)
box.appendChild(biaotou)
box.appendChild(newTable)
box.appendChild(yewei)
bigBox.appendChild(box)
init(xxarr, `init${boxIndex}`, true)
}
}
}, 100)
})
}
</script>
</body>
</html>VUE的写法
<script>
export default {
data() {
return {
arr: [ ],
go: true,
boxIndex: 10,//随机
}
},
computed: {
tableBox() {
let boxHeight = Number(this.$refs.box.style.height.replace(/px/g, ''))
let biaotou = Number(this.$refs.biaotou.style.height.replace(/px/g, ''))
let yewei = Number(this.$refs.yewei.style.height.replace(/px/g, ''))
return boxHeight - biaotou - yewei
},
},
mounted() {
this.init(this.arr, 'table1', true)
},
methods: {
init(arr, className, go) {
let table = document.getElementsByClassName(className)[0]
let tbody = table.children[1]
arr.forEach((item, index) => {
setTimeout(() => {
if (go) {
if (table.offsetHeight < (this.tableBox - 25)) {
let tdObj = {}
var tr = document.createElement('tr')
Object.keys(item).forEach(keyItem => {
tdObj[keyItem] = document.createElement('td')
tdObj[keyItem].innerHTML = item[keyItem]
tdObj[keyItem].style = 'word-break:break-all;'
tr.appendChild(tdObj[keyItem])
})
tbody.appendChild(tr)
}
else {
go = false
tbody.removeChild(tbody.lastElementChild)
let xxarr = arr.slice(index - 1)
this.boxIndex += 10
var box = document.getElementById('box').cloneNode(false)
var biaotou = document.getElementById('biaotou').cloneNode(true)
var yewei = document.getElementById('yewei').cloneNode(true)
var newTable = document.getElementById('table').cloneNode(false)
var bigBox = document.getElementById('bigBox')
var newTablehead = document.getElementById('table').firstChild.cloneNode(true)
var newtbody = document.createElement('tbody')
newTable.className = `init${this.boxIndex}`
newTable.appendChild(newTablehead)
newTable.appendChild(newtbody)
box.appendChild(biaotou)
box.appendChild(newTable)
box.appendChild(yewei)
bigBox.appendChild(box)
this.init(xxarr, `init${this.boxIndex}`, true)
}
}
}, 100)
})
},
},
}
</script><template>
<div class="bigBox" id="bigBox">
<div class="box" ref="box" style="height:1000px;width:800px;" id="box">
<div class="biaotou" id="biaotou" ref="biaotou" style="height:200px;width:800px;">
<span>6666</span>
</div>
<table border="1" id="table" ref="table" class="table1">
<thead>
<tr id="thead_tr">
<td>测量时间（月日时分）</td>
<td>测量地点</td>
<td>测量人 </td>
<td>易燃易爆物名称</td>
<td>测量数据 </td>
</tr>
</thead>
<tbody id="tbody" ref="tbody" style="height:500px;width:800px;"></tbody>
</table>
<div class="yewei" id="yewei" ref="yewei" style="height:200px;width:800px;">
<span>777</span>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.box {
position: relative;
margin: 0 auto;
border: 1px solid;
.biaotou {
border: 5px solid red;
// position: absolute;
// top: 0;
margin-bottom: 5px;
}
#table {
position: absolute;
top: 200;
display: inline-block;
white-space: normal;
text-overflow: ellipsis;
border-collapse: collapse;
#thead_tr td {
width: 200px;
white-space: nowrap;
}
#tbody tr td {
word-break: break-all !important;
max-width: 200px;
height: auto;
}
}
.yewei {
position: absolute;
bottom: 0;
border: 1px solid blue;
margin-top: 5px;
}
}
</style>测试的数据
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: '222222222222222222222222222',
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 'asdasdasd333333ssssssssssssssssssssssss333',
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: '222222222222222222222222222',
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 'asdasdasd333333ssssssssssssssssssssssss333',
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: '222222222222222222222222222',
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 'asdasdasd333333ssssssssssssssssssssssss333',
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: '222222222222222222222222222',
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 'asdasdasd333333ssssssssssssssssssssssss333',
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 'asdasdasd333333ssssssssssssssssssssssss333',
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: '125123111111111111111111',
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: '125123111111111111111111',
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: '125123111111111111111111',
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: '125123111111111111111111',
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: '125123111111111111111111',
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: '125123111111111111111111',
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: '125123111111111111111111',
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: '125123111111111111111111',
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: '125123111111111111111111',
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
},
{
a: 1,
b: 2,
c: 3,
d:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
