vue vxe-table表格标题根据内容宽度自动换行

本文首发于个人站点 vue vxe-table表格标题根据内容宽度自动换行
笔者个人站点 秋码记录

1、首先修改 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;
}

2、添加改变列宽度的回调方法

<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;
			},

3、使用vuex保留原始的表头标题

export default {
	state: {
		columnTitleObj: [], //列表头标题
		orgTitle: '', //原表头标题
	},
	mutations:{
		SET_COLUMN_TITLE(state,item){
			state.columnTitleObj = item
		},
		SET_ORG_TITLE(state,item){
			state.orgTitle = item
		},
	}

4、最终实现效果如下