当表格列数过度时，如果不做限制，表格会延伸到屏幕外，底部出现水平滚动条，看起来不美观，如果此时还要对表格内的数据进行编辑，就需要来回拖动滚动条，很不方便。
这里面涉及到两个问题，一个是表格标题文字过长时的换行处理，一个是表格内容过长时的换行处理
1、表格内容自动换行的处理
<table id="tmpTable" style="table-layout: fixed;word-break:break-all;" ></table>
像上面这定义表格，表格布局使用固定宽度fixed，可以保证表格不会溢出到屏幕以外；“word-break:break-all;”使得表格的内容过长时会自动换行，而不致于溢出到相邻单元格；
2、表格标题文字过长的处理
使用下面的自定义样式来修改th格式时，没有起到效果
th {
white-space: normal;
}
这位老兄，也遇到了同样的问题：https://segmentfault.com/q/1010000018752913
那就强行换行
1、方法一，使用函数
...
let cellLen = result.data.colTitles.length;
mycolumn.push({
field: fieldsss,
title: tableTitle(fieldsss,cellLen),
align: 'center',
valign: 'middle',
...
function tableTitle(title,cellLen) {
let str = title;
let splitValue = cellLen > 20 ? 4 : 7;
if (str.length > splitValue) {
let result = "";
for (let i = 0; i < str.length; i++) {
result += str[i];
if ((i + 1) % splitValue === 0) {
result += "<br>"; // 在第n个字符后添加换行标签
}
}
return result;
}
return str;
}
这上面具体的分割长度可能需要根据实际情况调试一下。
2、方法二，在title中嵌入一个div(推荐）
修改上面的代码
mycolumn.push({
field: fieldsss,
/*title: fieldsss,*/
/*title: tableTitle(fieldsss,cellLen),*/
title: `<div style='white-space:nowrap;white-space: normal;word-break:break-all; word-wrap: break-word'>${fieldsss}</div>`,
......
因为th无法应用到自动换样式，就通过内嵌一个div来达到自动换行的效果
