Я новичок в JS фреймворках и хочу создать визуальный предварительный просмотр размеров таблицы, загруженной пользователем с помощью Vue. У меня есть две переменные, описывающие количество столбцов и количество строк, и я хочу использовать их для генерации SVG, таблицы html или сетки CSS. Я попробовал несколько методов, но они в основном полагались на циклический перебор массива, описывающего элементы ячейки. Это не показалось мне элегантным, так как я хочу создать визуальную матрицу без каких-либо ячеек, содержащих элементы / значения в ней.
Вот очень быстрый пример статичной c генерации таблиц SVG. на 'max-row' и 'max_columns' с простым JS: https://jsfiddle.net/amny8935/
Из-за моего недостатка знаний с Vue, виртуальными DOM и JS Frontends в общем, я совершенно заблудился, какой подход имеет больше смысла.
<html lang="en">
<head>
</head>
<body>
<div id="wrapper">
<script>
var max_rows = 6;
var max_columns = 4;
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var svgNS = svg.namespaceURI;
function create_matrix(size, gap, columns, max_rows) {
for (rows = 0; rows < max_rows; rows++) {
var rect = document.createElementNS(svgNS,'rect');
rect.setAttribute('x', columns * gap);
rect.setAttribute('y', rows * gap);
rect.setAttribute('width',size);
rect.setAttribute('height',size);
rect.setAttribute('fill','#95B3D7');
svg.appendChild(rect);
}
document.getElementById("wrapper").appendChild(svg);
}
for (columns = 0; columns < max_columns; columns++) {
create_matrix(14, 20, columns, max_rows);
}
</script>
</div>
</body>
</html>