获取tree跨行跨列
获取tree跨行跨列
function getColspan (column) {
let colspan = 0
const children = column.children || []
for (let i = 0; i < children.length; i++) {
const item = children[i]
if (item.children && item.children.length > 0) {
colspan += getColspan(item)
} else {
colspan += 1
}
}
if (colspan == 0) {
colspan = 1
}
return colspan
}
// 获取跨列
function getRowspan (column, maxLevel) {
let rowspan = 1
if (!column.children || column.children.length == 0) {
rowspan = maxLevel - column.level + 1
}
return rowspan
}
function getMaxFloor (columns) {
let max = 0
const deepEach = function (column, floor) {
if (floor > max) {
max = floor
}
const children = column.children
if (children && children.length) {
children.forEach(child => {
deepEach(child, floor + 1)
})
}
}
columns.forEach(column => {
deepEach(column, 0)
})
return max
}
const colmuns = [
{
label: '测试L1',
prop: '测试L1',
width: 200,
align: 'left',
showOverflowTooltip: true
},
{
label: '测试L2',
prop: '测试L2',
width: 200,
align: 'left',
showOverflowTooltip: true
},
{
label: '测试L3',
prop: 'cod',
align: 'center',
children: [
{
label: '测试L3-2-1',
prop: '测试L3-2',
width: 150,
align: 'center',
children: [
{
label: '测试L3-2-1',
prop: '测试L3-2',
width: 150,
align: 'center'
},
{
label: '测试L3-2-2',
prop: '测试L3-2-2',
width: 150,
align: 'center'
}
]
},
{
label: '测试L3-2-2',
prop: '测试L3-2-2',
width: 150,
align: 'center',
children: [
{
label: '测试L3-2-1',
prop: '测试L3-2',
width: 150,
align: 'center'
},
{
label: '测试L3-2-2',
prop: '测试L3-2-2',
width: 150,
align: 'center'
},
{
label: '测试L3-2-2',
prop: '测试L3-2-2',
width: 150,
align: 'center',
children: [
{
label: '测试L3-2-2',
prop: '测试L3-2-2',
width: 150,
align: 'center'
}
]
}
]
}
]
},
{
label: '测试L4',
prop: '测试L4',
align: 'center',
children: [
{
label: '测试L4-1',
prop: '测试L4-1',
width: 150,
align: 'center',
children: [
{
label: '测试L4-1-1',
prop: '测试L4-1-1',
width: 150,
align: 'center',
children: [
{
label: '测试L4-1-1-1',
prop: '测试L4-1-1-1',
width: 150,
align: 'center',
children: [
{
label: '测试L3-2-2',
prop: '测试L3-2-2',
width: 150,
align: 'center'
}
]
}
]
}
]
}
]
}
]
const maxLevel = getMaxFloor(colmuns)
xlsx合并单元格
// 获取跨列
function getColspan (column) {
let colspan = 0
const children = column.children || []
for (let i = 0; i < children.length; i++) {
const item = children[i]
if (item.children && item.children.length > 0) {
colspan += getColspan(item)
} else {
colspan += 1
}
}
if (colspan == 0) {
colspan = 1
}
return colspan
}
// 获取跨列
function getRowspan (column, maxLevel) {
let rowspan = 1
if (!column.children || column.children.length == 0) {
rowspan = maxLevel - column.level + 1
}
return rowspan
}
function getMaxFloor (columns) {
let max = 0
const deepEach = function (column, floor) {
if (floor > max) {
max = floor
}
const children = column.children
if (children && children.length) {
children.forEach(child => {
deepEach(child, floor + 1)
})
}
}
columns.forEach(column => {
deepEach(column, 0)
})
return max
}
// https://segmentfault.com/q/1010000023268006?utm_source=tag-newest
// 转换数字到EXCEL单元格编号
function numberToCellCode (number) {
let s = ''
while (number > 0) {
let m = number % 26
if (m === 0) m = 26
s = String.fromCharCode(m + 64) + s
number = (number - m) / 26
}
return s
}
// 行转列
function formatJson (filterVal, jsonData) {
return jsonData.map(v =>
filterVal.map(j => {
return v[j]
})
)
}
// 获取合并配置
function getMerges (headers) {
const merges = []
const multiHeader = []
const dataFields = []
let cellNumber = 0
const deepColumn = (list = [], parent = null) => {
list.forEach((item, index) => {
cellNumber++
if (parent && index == 0) {
cellNumber = parent.cellNumber
}
item.level = !parent ? 0 : parent.level + 1
item.cellNumber = cellNumber
item.cellCode = numberToCellCode(item.cellNumber)
item.colspan = getColspan(item)
item.rowspan = getRowspan(item, maxFloor)
multiHeader[item.level] = multiHeader[item.level] || []
multiHeader[item.level].push(item.label)
if (item.colspan > 1) {
for (let i = 0; i < item.colspan - 1; i++) {
multiHeader[item.level].push('')
}
merges.push(`${item.cellCode}${item.level + 1}:${numberToCellCode(item.cellNumber + item.colspan - 1)}${item.level + 1}`)
}
if (item.rowspan > 1) {
for (let i = 1; i < item.rowspan; i++) {
multiHeader[item.level + i] = multiHeader[item.level + 1] || []
multiHeader[item.level + i].push('')
}
merges.push(`${item.cellCode}${item.level + 1}:${item.cellCode}${item.level + 1 + item.rowspan - 1}`)
}
if (item.children && item.children.length) {
deepColumn(item.children, item)
} else {
dataFields.push(item.prop)
}
})
}
deepColumn(headers)
console.log(multiHeader)
return { merges, multiHeader, dataFields }
}
const columns2 = [
{
label: '用户姓名',
prop: 'name',
align: 'center'
},
{
label: '联系方式',
prop: '联系方式',
align: 'center',
children: [
{
label: '邮箱',
prop: 'email',
align: 'center'
},
{
label: '联系电话',
prop: 'linkphone',
align: 'center'
},
{
label: '联系地址',
prop: 'address',
align: 'center'
}
]
},
{
label: '年龄',
prop: 'age',
align: 'center'
},
{
label: '所在城市',
prop: 'city',
align: 'center'
},
{
label: '身份证号码',
prop: 'idNumber',
align: 'center'
}
]
const columns = [
{
label: '文件标题',
prop: '文件标题',
align: 'center',
children: [
{
label: '数据时间:2023年3月28日',
prop: '数据时间:2023年3月28日',
align: 'right',
children: columns2
}
]
}
]
const maxFloor = getMaxFloor(columns)
// const headerStr = computed(() => {
// return jsBeautify.js_beautify(JSON.stringify(columns), {
// indent_size: 4,
// space_in_empty_paren: true
// })
// })
const test1 = () => {
const merges = getMerges(columns)
console.log(merges)
}
const { merges, multiHeader, dataFields } = getMerges(columns)
const data = formatJson(dataFields, res.data)
for (let i = multiHeader.length - 1; i > -1; i--) {
data.unshift(multiHeader[i])
}
console.log(data)