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

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

  • 累计撰写 123 篇文章
  • 累计创建 256 个标签
  • 累计创建 41 个分类

自定义vxe-table表头标题文字过多,显示两行多余省略号并给出tooltip

自定义vxe-table表头标题文字过多,显示两行多余省略号并给出tooltip

在上一篇已经实现表头换行,本文将继续实现对含有省略号的标题做出tooltip提示。

最终效果如下图: img

1、首先在body创建一个div

let tooltipDiv = document.createElement('div')
tooltipDiv.setAttribute("class","vxe-table--tooltip-wrapper")
document.body.appendChild(tooltipDiv);

2、对表头添加鼠标移入移出事件

mounted() {
    let that = this
setTimeout( () => {
                const tooltipDom = document.querySelector('.vxe-table--tooltip-wrapper')

                let th =document.querySelectorAll('.vxe-table--header th.vxe-header--column')


                let storeColumn = this.$store.state.autoFilter.columnTitleObj

                for(let i=0;i<th.length;i++){
                    let colid = th[i].getAttribute("colid")
                    let currColumn = that.$refs.table.getColumnById(colid)
                    let isTooltip = false
                    let orgTitle = ''
                    for(let j = 0; j < storeColumn.length; j++){
                        if(storeColumn[j]['prop'] == currColumn['property']){
                            isTooltip = storeColumn[j]['tooltip']
                            orgTitle = storeColumn[j]['orgTitle']
                            break
                        }
                    }

                    if(isTooltip){
                        th[i].addEventListener('mouseenter',(e) => {

                            const { scrollTop, scrollLeft, visibleWidth } = this.$TOOL.getDomNode()
                            const { top, left } = this.$TOOL.getAbsolutePos(e.target)
                            const el = th[i]
                            const marginSize = 6
                            const offsetHeight = el.offsetHeight
                            const offsetWidth = el.offsetWidth
                            let tipLeft = left
                            //let tipTop = top - offsetHeight - marginSize
                            tipLeft = Math.max(marginSize, left + Math.floor((e.target.offsetWidth - offsetWidth) / 2))
                            if (tipLeft + offsetWidth + marginSize > scrollLeft + visibleWidth) {
                                tipLeft = scrollLeft + visibleWidth - offsetWidth - marginSize
                            }
                            if (top - offsetHeight < scrollTop + marginSize) {
                                //tipStore.placement = 'bottom'
                                //tipTop = top + e.target.offsetHeight + marginSize
                            }

                            let arrowLeft = `${left - tipLeft + e.target.offsetWidth / 2}px`


                            tooltipDom.classList.add("theme--dark","size--small","placement--top","is--enterable",
                                "is--visible","is--arrow","is--actived")
                            tooltipDom.setAttribute("style","width:auto;left:"+tipLeft+"px;top:126px;z-index:1000;")

                            tooltipDom.innerHTML = '<div class="vxe-table--tooltip-content">'+orgTitle+'</div><div class="vxe-table--tooltip-arrow" style="left:'+arrowLeft+'"></div>'

                        })

                        th[i].addEventListener( 'mouseleave',() => {
                            console.log('鼠标移出')
                            tooltipDom.classList.remove("placement--top","is--visible","is--actived")
                        })

                    }


                }

            },1500)
}

工具函数

/**
 * 获取某DOM节点的信息
 * @param elem {object} DOM节点
 * @returns {{boundingLeft: number, visibleWidth: *, top: *, left: *, boundingTop: number, visibleHeight: *}}
 */
tool.getAbsolutePos = function(elem){
    const bounding = elem.getBoundingClientRect()
    const boundingTop = bounding.top
    const boundingLeft = bounding.left
    const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = this.getDomNode()
    return { boundingTop, top: scrollTop + boundingTop, boundingLeft, left: scrollLeft + boundingLeft, visibleHeight, visibleWidth }
}
/**
 * 获取body DOM对象相关信息
 * @returns {{visibleWidth: number, visibleHeight: number, scrollLeft: number, scrollTop: number}}
 */
tool.getDomNode = function() {
    const documentElement = document.documentElement
    const bodyElem = document.body
    return {
        scrollTop: documentElement.scrollTop || bodyElem.scrollTop,
        scrollLeft: documentElement.scrollLeft || bodyElem.scrollLeft,
        visibleHeight: documentElement.clientHeight || bodyElem.clientHeight,
        visibleWidth: documentElement.clientWidth || bodyElem.clientWidth
    }
}

在vuex加入

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

在 resizableChange 方法添加如下内容

resizableChange({column}){
let orgColumn = this.$store.state.autoFilter.columnTitleObj

                for(let i = 0; i < orgColumn.length; i++){
                    if(orgColumn[i].prop == column.property){
                        this.$store.commit("SET_ORG_TITLE", orgColumn[i]['orgTitle'])
                        break
                    }
                }

                let orgTitle = this.$store.state.autoFilter.orgTitle

                let l = orgTitle.length //column.title.length
                let f = 16 //每一个字大小,实际上是每一个字的比例值,大概会比字体大小差很少大一点,


                let subLen = ~~(2 * (Number(column['resizeWidth']) - 30 )) / f

                let lineCount = ~~((Number(column['resizeWidth']) - 30 ) / f)
                let showTextNum = 2 * lineCount


                let isTooltip = false
                if(l > showTextNum){
                    column.title = this.$TOOL.subString(orgTitle,10,true)
                    isTooltip = true


                }else{
                    column.title = this.$TOOL.subString(orgTitle,subLen,false)
                    isTooltip = false

                }

                for(let i = 0; i < orgColumn.length; i++){
                    if(orgColumn[i].prop == column.property){
                        orgColumn[i].tooltip = isTooltip
                        break
                    }
                }

                this.$store.commit("SET_COLUMN_TITLE", orgColumn)
}
vue vxe-table表格标题根据内容宽度自动换行
« 上一篇 2022-06-02
ag-grid 右键单元格动态改变单元格样式
下一篇 » 2022-06-14

相关推荐

  • vue vxe-table表格标题根据内容宽度自动换行 2022-06-02 15:58:34 +0000 +0000