侧边栏壁纸
博主头像
秋码记录

一个游离于山间之上的Java爱好者 | A Java lover living in the mountains

  • 累计撰写 29 篇文章
  • 累计创建 40 个标签
  • 累计创建 185 个分类

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

表格标题内容过多时,换行显示且多余部分以省略号显示。

1、最终实现效果如下

img

img

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