上篇文件介紹了基本的colspan和rowspan，這篇貼上一個(gè)學(xué)習(xí)代碼，供以后修改。
效果如下：（這個(gè)demo v-if 和 v-for 混用了，這個(gè)不好）

<template><div class="rbac-table"><div class="table-wrapper"><div class="tabel-container"><table><tbody><tr v-for="(item, index) in classTableData" :key="index"><td v-for="(node, nodeIndex) in item" :key="nodeIndex" :colspan="node.colspan" :rowspan="node.rowspan" v-if="node.colspan !== 0 && node.rowspan !== 0"><div v-if="node.data.type !== 'function'">{{ node.data.name }}<div>{{ node.colspan }}-{{ node.rowspan }}</div></div><div v-else><function-check :value="node" /></div></td></tr></tbody></table></div></div></div> </template> <script> import FunctionCheck from './components/FunctionCheck.vue' const shortid = require('shortid') // 深度遍歷, 使用遞歸 const getNodeTable = data => {let deep = 0const resultArr = []data.forEach(item => {const itemArr = []const map = (node, level, parent) => {if (level > deep) {deep = level}if (!node.id) {node.id = shortid.generate()}if (parent == null) {resultArr.push({key: node.id,arr: [{key: node.id,_id: node._id,// 第幾層級(jí)level: level,// 名稱name: node.name,function: node.function,},],})}if (node.children) {const parentIndex = resultArr.findIndex(x => {return x.key == node.id})// 截取前面公用部分const commonArr = resultArr[parentIndex].arr.slice(0, level)const replaceArr = []node.children.forEach((child, index) => {child.id = shortid.generate()replaceArr.push({key: child.id,arr: commonArr.concat({ level: level + 1, name: child.name, function: child.function, _id: child._id, key: child.id }),})})resultArr.splice(parentIndex, 1, ...replaceArr)node.children.forEach(child => {map(child, level + 1, node)})}}map(item, 1, null)})return {data: resultArr,deep: deep,} }const tableData = [{name: '訂單管理',type: 'menu',_id: '1',children: [{name: '銷售訂單',_id: '2',type: 'menu_function',function: [{name: '全選',},{name: '訂單查看',_id: '21',},{name: '訂單添加',_id: '22',},{name: '訂單修改',_id: '23',},{name: '訂單刪除',_id: '24',},{name: '訂單打印',_id: '25',},{name: '訂單下載',_id: '26',},{name: '一鍵完成',_id: '27',},{name: '打印送貨單',_id: '28',},],},{name: '采購訂單',type: 'menu_function',_id: '3',function: [{name: '全選',},{name: '訂單查看',_id: '31',},{name: '訂單添加',_id: '32',},{name: '訂單修改',_id: '33',},{name: '訂單刪除',_id: '34',},{name: '訂單打印',_id: '35',},{name: '訂單下載',_id: '36',},{name: '一鍵完成',_id: '37',},{name: '打印送貨單',_id: '38',},],},],},{name: '銷售訂單',_id: '5',type: 'menu_function',function: [{name: '全選',},{name: '訂單查看',_id: '51',},{name: '訂單添加',_id: '52',},{name: '訂單修改',_id: '53',},{name: '訂單刪除',_id: '54',},{name: '訂單打印',_id: '55',},{name: '訂單下載',_id: '56',},{name: '一鍵完成',_id: '57',},{name: '打印送貨單',_id: '58',},],}, ]export default {components: {FunctionCheck,},data() {return {data: [],columns: [],classTableData: [],}},mounted() {const { data, deep } = getNodeTable(tableData)const rowLength = data.lengthconst colLength = deep + 1const bdata = new Array(rowLength)for (let i = 0; i < colLength; i++) {bdata[i] = new Array(colLength)}for (let i = 0; i < rowLength; i++) {const row = data[i].arrfor (let j = colLength - 1; j > -1; j--) {if (!row[j] && row[j - 1]) {row[j] = JSON.parse(JSON.stringify(row[j - 1]))row[j].type = 'function'console.log('row[j]', row[j])}bdata[i][j] = {data: row[j],rowspan: 1,colspan: 1,}}}let matchArr = []let matchArrPos = []// 最左側(cè)為基準(zhǔn)let matchLeftArr = []let matchLeftPos = []for (let i = 0; i < rowLength; i++) {matchLeftArr.push(bdata[i][0])matchLeftPos.push({ x: i, y: 0 })}for (let i = 0; i < rowLength; i++) {if (i == 0) {matchArr = JSON.parse(JSON.stringify(bdata[i]))}for (let j = 0; j < colLength; j++) {// row 處理 beginif (i == 0) {matchArrPos.push({ x: i, y: j })} else {if (bdata[i][j].data && bdata[i][j].data.key == matchArr[j].data.key) {const { x, y } = matchArrPos[j]bdata[x][y].rowspan = bdata[x][y].rowspan + 1bdata[i][j].rowspan = 0} else {matchArr[j] = bdata[i][j]matchArrPos[j] = { x: i, y: j }}}// row 處理 end// col 處理 beginif (j > 0) {if (bdata[i][j].data == undefined) {const { x, y } = matchLeftPos[i]bdata[x][y].colspan = bdata[x][y].colspan + 1bdata[i][j].colspan = 0} else {matchLeftArr[i] = bdata[i][j]matchLeftPos[i] = { x: i, y: j }}}}// col 處理 end}this.classTableData = bdata}, } </script> <style lang="less" scoped> .rbac-table {background: white;.table-wrapper {width: 100%;height: 100%;overflow: auto;}.tabel-container {margin: 7px;table {table-layout: fixed;width: 100%;tbody {background-color: white;td {color: #677998;}}th,td {width: 60px;padding: 12px 2px;font-size: 12px;text-align: center;border: 1px solid #d9d9d9;position: relative;}tr td:first-child {color: #333;.period {font-size: 8px;}}}} } </style>

組件FunctionCheck

<template><div class="function-check"><div class="check-item" v-for="(item, index) in value.data.function" :key="index"><a-checkbox @change="onChange">{{ item.name }}</a-checkbox></div></div> </template> <script> export default {props: {value: {type: Object,default: () => {return {}},},}, } </script> <style lang="less" scoped> .function-check {width: 100%;height: 100%;padding-left: 10px;display: flex;flex-wrap: wrap;.check-item {width: 120px;margin-top: 2px;margin-bottom: 2px;text-align: left;} } </style>

總結(jié)

以上是生活随笔為你收集整理的table 权限 展示页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。