表格标题内容过多时，换行显示且多余部分以省略号显示。
1、最终实现效果如下
2、修改 vxe-table 表头样式
.vTable-table .vxe-table .vxe-table--header .vxe-header--row .vxe-header--column .vxe-cell--title {
white-space:pre-wrap;
word-wrap: break-word;
}
3、添加改变列宽度的回调方法
<vxeTable ref="table"
<!--省略表格属性 以及方法 这些不是本文的重点-->
@resizable-change="resizableChange"></vxeTable>
/**
* 在改变表格宽度时 表头内容自适应宽度
* @param column {object} 当前移动的列对象
*/
resizableChange({column }){
let orgColumn = this.$store.state.autoFilter.columnTitleObj
orgColumn.forEach(item => {
try{
if(item.prop == column.property){
this.$store.commit("SET_ORG_TITLE", item['orgTitle'])
throw new Error('退出循环！');
}
}catch(e){
console.log(e)
}
})
let orgTitle = this.$store.state.autoFilter.orgTitle
let l = orgTitle.length //column.title.length
let f = 16 //每一个字大小，实际上是每一个字的比例值，大概会比字体大小差很少大一点，
let labelWidth = f * l //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正
let minWidth = column['minWidth']
let subLen = ~~(2 * (Number(column['resizeWidth']) - 30 )) / f
let lineCount = ~~((Number(column['resizeWidth']) - 30 ) / f)
let showTextNum = 2 * lineCount
// 最小宽度 120 扣除 30 一行 90 显示两行 180
if(l > showTextNum){
column.title = this.subString(orgTitle,10,true)
}else{
column.title = this.subString(orgTitle,subLen,false)
}
},
/**
* 截取中英文字符
* @param str {string} 原始字符
* @param len {number} 需截取的字符长度
* @param hasDot {boolean} 是否需要省略号
* @returns {string} 返回截取后的新字符
*/
subString(str, len, hasDot) {
var newLength = 0;
var newStr = "";
var chineseRegex = "/[^\x00-\xff]/g";
var singleChar = "";
var strLength = str.replace(chineseRegex, "**").length;
for (var i = 0; i < strLength; i++) {
singleChar = str.charAt(i).toString();
if (singleChar.match(chineseRegex) != null) {
newLength += 2;
}
else {
newLength++;
}
if (newLength > len) {
break;
}
newStr += singleChar;
}
if (hasDot && strLength > len) {
newStr += "...";
}
return newStr;
},
4、使用vuex保留原始的表头标题
export default {
state: {
columnTitleObj: [], //列表头标题
orgTitle: '', //原表头标题
},
mutations:{
SET_COLUMN_TITLE(state,item){
state.columnTitleObj = item
},
SET_ORG_TITLE(state,item){
state.orgTitle = item
},
}