Vue.js-如何将简单数组转换为动态NxNxN矩阵 [英] Vue.js - How to convert a simple array to dynamic NxNxN Matrix
本文介绍了Vue.js-如何将简单数组转换为动态NxNxN矩阵的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
假设您有一个数组:
listItems = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ,13 ,14 ,15 ,16, 17, 18, 19, 20, 21, 22, 23];
我希望它按实例数转换为3维数组((ROW矩阵x列)x SET，如下所示:
And I want it to convert into 3-dimensional Array((Matrix of ROW x COLUMN)x SET by Number of Instances, like this:
示例:3行3列= 1组
--GENERATED GRIDS--
A = [[1, 2, 3], [4, 5, 6],[7, 8, 9];
B = [[10, 11, 12], [13, 14, 15], [16, 17, 18]];
C = [[19, 20, 21], [22,23]]
请注意，矩阵的行和列是可变的.这意味着行或列中的项目数可能会更改，甚至数据集中的项目数也可能会有所不同.
Note, that rows and columns of the matrix are changeable. Meaning that the number of items in the rows or column may change and even the amount of items in the data set may also differ.
您能否也提供一个示例，以便我能够在下面实现预期的结果.
Could you also provide an example so that I'm able to achieve the expected results below.
预期结果:(生成的表格包含html结构):
<HTML>
<CONTAINER>
//A SET
<div class "set">
ROW 1: <row><div class "items"> 1 </div><div class "items"> 2</div><div class "items"> 3</div></row>
ROW 2: <row><div class "items"> 4</div><div class "items"> 5</div><div class "items"> 6</div><row>
ROW 3: <row><div class "items"> 7</div><div class "items"> 8</div><div class "items"> 9</div></row>
</div>
</div>
//B SET
<div class "set">
ROW 1: <row><div class "items"> 10</div><div class "items"> 11</div><div class "items"> 12</div></row>
ROW 2: <row><div class "items"> 13</div><div class "items"> 14</div><div class "items"> 15</div><row>
ROW 3: <row><div class "items"> 16</div><div class "items"> 17</div><div class "items"> 18</div></row>
</div>
</div>
//C Set
<div class "set">
ROW 1: <row><div class "items"> 19</div><div class "items"> 20</div><div class "items"> 21</div></row>
ROW 2: <row><div class "items"> 22</div><div class "items"> 23</div></row>
</div>
</div>
</CONTAINER>
</HTML>
答案格式模板:
<template>
<container>
<LOOP THROUGH ALL SETS>
<div class ="set">
<SOME CODE LOOP THROUGH MATRIX 1 - ROW and COLUMN>
</div>
<div class ="set">
<SOME CODE LOOP THROUGH MATRIX 2 - ROW and COLUMN>
</div>
<div class ="set">
<SOME CODE LOOP THROUGH MATRIX 3 - ROW and COLUMN>
</div>
...
...
<END LOOP THROUGH ALL SETS>
<container>
</template>
<script>
export default {
components: {
},
computed: {
<SOME CODE USE TO PROCESS ARRAY INTO N x N x N... >
},
data () {
return {
itemPerCol:3,
itemsPerRow: 3,
listItems:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ,13 ,14 ,15 ,16, 17, 18, 19, 20, 21, 22, 23],
</script>
<style>
</style>
请尽可能提供与Vue.JS兼容的答案，因为Vue.JS非常敏感
非常感谢您的帮助.
推荐答案
您可以使用香草JS重塑数组.
You can reshape the array using vanilla JS.
const range = (start, stop) => Array(stop - start).fill(0).map((n, i) => i + start);
const equals = (actual, expected) => JSON.stringify(actual) === JSON.stringify(expected);
const expected = [
[ [ 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 ] ],
];
console.log(equals(reshape(range(1, 28), 3, 3), expected)); // range = [1, 27]
function reshape(list, perCol, perRow) {
let result = [];
for (let i = 0; i < list.length; i++) {
let row = Math.floor(i / (perCol * perRow)),
col = Math.floor((i / perRow) % perRow),
item = Math.floor(i % perCol);
result[row] = result[row] || []; // lazy init
result[row][col] = result[row][col] || []; // lazy init
result[row][col][item] = list[i];
}
return result;
}
.as-console-wrapper { top: 0; max-height: 100% !important; }
从矩阵生成的表格"的示例.
An example of a "table" generated from the matrix.
const matrix = [
[ [ 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 ] ],
];
renderMatrix(matrix);
function renderMatrix(matrix, target) {
let containerEl = document.createElement('div');
containerEl.className = 'container';
for (let s = 0; s < matrix.length; s++) {
let setEl = document.createElement('div');
setEl.className = 'set';
for (let r = 0; r < matrix[s].length; r++) {
let rowEl = document.createElement('div');
rowEl.className = 'row';
for (let c = 0; c < matrix[s][r].length; c++) {
let itemEl = document.createElement('div');
itemEl.className = 'item';
itemEl.textContent = matrix[s][r][c];
rowEl.appendChild(itemEl);
}
setEl.appendChild(rowEl);
}
containerEl.appendChild(setEl);
}
(target || document.body).appendChild(containerEl);
}
.container {
border: thin solid black;
}
.set {
border: thin solid green;
margin: 0.5%;
width: 98.5%;
}
.row {
display: inline-block;
border: thin solid red;
margin: 0.5%;
width: 31.75%;
}
.item {
display: inline-block;
width: 28%;
margin: 2%;
border: thin solid blue;
text-align: center;
}
这篇关于Vue.js-如何将简单数组转换为动态NxNxN矩阵的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
