需求：电梯按键数字从小到大，从下至上，换列也要遵循此规律。行数不限制，列数需3列
不制约行数，限制3列，实现过程如下
<!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>Document</title>
<style>
.out {
width: 600px;
display: flex;
flex-wrap: wrap;
}
.inner {
width: 200px;
text-align: center;
}
.btn {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="app">
<div class="out">
<div class="inner" v-for="(item,index) in list" :key="index">
<div class="btn">{{item}}</div>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32],//动态数据
// list:[1,2,3,4,5,6,7,8,9,10],//动态数据
},
methods: {
getList: function () {
// 行 rowNum 列数3
let total = this.list.length
let rowNum = Math.ceil(total / 3)
let fake = rowNum * 3
let cha = fake - total
let left = rowNum - (fake - total)
let arr = [rowNum]
for (let index = 0; index < fake; index++) {
if (index != 0) {
arr[index] = null
let col = (index + 1) % 3
arr[index] = rowNum - index / 3
if (index % 3 == 0) {
arr[index] = rowNum - index / 3
} else {
arr[index] = arr[index - 1] + rowNum
if (cha != 0 && index == Math.floor(index / 3) * 3 + 2) {
arr[index] = arr[index] - cha
if (Math.floor(index / 3) + 1 > left) {
arr[index] = ""
}
}
}
}
}
// 最终结果数据
this.list = arr
console.log(arr)
}
},
mounted: function () {
this.getList()
}
})
</script>
</body>
</html>