通過自定義指令fit-columns來解決
ellipsis設置true
function adjustColumnWidth(table) {
const thead = table.querySelector('thead');
const tbody = table.querySelector('tbody');
const headList = [];
const bodyList = [];
const widthList = [];
thead.querySelectorAll('th').forEach(item => {
headList.push(item.querySelector('span').offsetWidth + 18);
});
tbody
.querySelector('tr')
.querySelectorAll('td')
.forEach((item, index) => {
const bodyWidth = item.offsetWidth;
let width = bodyWidth;
bodyList.push(bodyWidth);
if (bodyWidth < headList[index]) {
width = headList[index];
}
item.style.minWidth = `${width}px`;
thead.querySelectorAll('th')[index].style.minWidth = `${width}px`;
widthList.push(width);
});
}
Vue.directive('fit-columns', {
componentUpdated(el) {
setTimeout(() => {
adjustColumnWidth(el);
}, 200);
},
});