微信如何做模板下载网站,旅游电子商务网站开发实验报告,重庆市企业网站建设,电商大数据查询平台效果 核心
布局配置矩阵#xff08;以下为多个模式),可以使用|或\n表示矩阵行
const gridArr [1,2,a,b
3,4,a,b
5,6,a,b
,1,2
3,4
5,6
,1,2,3,4
3,4]任意横向或者纵向相同的字符表示一个合并块
使用
CalcTable grid1,2,a,b|3,4,a,b|5,6,a,b span…效果 核心
布局配置矩阵以下为多个模式),可以使用|或\n表示矩阵行
const gridArr [1,2,a,b
3,4,a,b
5,6,a,b
,1,2
3,4
5,6
,1,2,3,4
3,4]任意横向或者纵向相同的字符表示一个合并块
使用
CalcTable grid1,2,a,b|3,4,a,b|5,6,a,b span姓名/spanspan李牧/spanspan证件/spanspanimg/spanspan性别/spanspan男/spanspan身份证号/spanspan3707783199609282223/span
/CalcTable代码
因为是在vue开发中有些地方使用表格布局后来想偷懒不写tr,td,然后就有了以下代码可扩展为组件化的任意布局方案管理
script
/*
* 通过输入表格标记矩阵自动生成合并后的表格结构
*
* 可扩展为组件化的任意布局
* */
export default {name: CalcTable,data() {return {}},props: {grid: {type: String,default: 1,2,3,4|5,5,3,4|5,5,6,7|8,9,10,1|7,9,1,2}},render(h) {const vm thisconst innerVNode vm.$scopedSlots.default()let renderIndex 0//1)计算matrixconst matrix vm.gridStrToMatrix()//2)双层循环遍历matrix,及逐行逐列return h(table, {}, matrix.map(row {return h(tr,{},[h(td,{class:{fill:true}}),row.filter(d d).map(cell {return h(td, {attrs: {colspan: cell[1],rowspan: cell[0]}}, renderIndexinnerVNode.length ? [innerVNode[renderIndex]] : [])})])}))},methods: {gridStrToMatrix() {const vm this//以行列表示每个字符位置let rows vm.grid.replace(/ /g,).split(/\n|\|/).filter(dd)let matrix new Array(rows.length)rows.forEach((row, index) {matrix[index] row.split(,)})//遍历所有进行合并标记let rowIndex, colIndex, row, cellfor (rowIndex 0; rowIndex matrix.length; rowIndex) {row matrix[rowIndex]for (colIndex 0; colIndex row.length; colIndex) {cell matrix[rowIndex][colIndex]// console.log(cell)if (cell ! null) {let span [1, 0]for (let i colIndex; i row.length; i) {if (row[i] cell) {span[1]row[i] null}}for (let i rowIndex; i matrix.length; i) {if (matrix[i][colIndex] cell) {span[0]matrix[i][colIndex] null}}for (let i rowIndex; i rowIndex span[0]; i) {for (let j colIndex; j colIndex span[1]; j) {matrix[i][j] null}}matrix[rowIndex][colIndex] span}}}return matrix}}
}
/scriptstyle scopedtd {border: 1px solid #000;padding: 20px;}table {border-collapse: collapse;}.fill {padding-left: 0;padding-right: 0;border: 0;}
/style
