columnWidth.js
export default {
data() {
return {
minWidth: 100
}
},
watch: {
minWidth() {
this.setWidth()
}
},
methods: {
setWidth() {
if (this.headerData) {
this.$set(this.headerData[this.headerData.length - 1], 'width', this.minWidth)
}
},
// 获取列表数据后,调用此方法
getTextWidth(ref) {
const trArr = []
const operateTd = []
const buttonNumArr = []
let isContainMore = false // 是否含有'更多'按钮,因为‘更多’后面有个尖括号
this.$nextTick(() => {
// 获取当前table的所有tr
let tr = []
if (ref && this.$refs[ref]) {
tr = this.$refs[ref].$el.querySelectorAll('tbody tr')
} else {
tr = document.querySelectorAll('tbody tr')
}
// console.log(tr)
if (tr.length) {
tr.forEach((item, index) => {
const t = trArr.find(t => t.rowIndex === item.rowIndex)
if (!t) trArr.push(item)
})
}
// 获取每一行tr中操作栏的按钮数量(操作栏在最后一列)
trArr.forEach(item => {
const span = document.createElement('span')
span.classList.add('getColumnWidth')
const td = item.querySelector('td:last-child .cell')
const allSpan = td.querySelectorAll('span')
const textArr = []// 存放每一行的按钮文字
// console.log(btns.length)
allSpan.forEach(b => {
if (b.innerHTML) {
const str = b.innerHTML + ''
const text = str.replace(/<[^>]+>/g, '')
if (text.indexOf('更多') !== -1) {
isContainMore = true
}
if (textArr.indexOf(text) === -1) {
textArr.push(text)
}
}
})
buttonNumArr.push(textArr.length)
// const cloneTd = btns.cloneNode(true)
if (td) {
span.innerHTML = textArr.join(',')
// span.appendChild(cloneTd)
document.body.appendChild(span)
operateTd.push(span.offsetWidth)
document.querySelector('.getColumnWidth').remove()
}
})
// 获取长度最大的操作栏
const width = Math.max(...operateTd)
// 获取按钮数量最多的操作栏
const buttonNum = Math.max(...buttonNumArr)
// 计算宽度
if (buttonNumArr.length < 1) {
this.minWidth = 80
} else {
let extra = 40
if (isContainMore) {
extra = 40 + 10
}
this.minWidth = width + (buttonNum - 1) * 10 + extra
}
})
}
}
}