popover展示超出省略部分

展示超出省略部分

 

 实现

html部分
...省略
<span @mouseover="spill(...arguments, item.materialSn)" @mouseout="closePopover">
                        {{ item.materialSn }}
</span>
...省略
 <el-popover v-if="curNumCell" ref="numPopover" :reference="curNumCell" placement="bottom">
            {{ value }}
</el-popover>

//js部分
        spill(element, value) {
            this.value = value
            let cell = element.path[0]
            if (cell.scrollWidth > cell.clientWidth) {
                if (this.curNumCell) {
                    const curCellClass = this.curNumCell.classList
                    curCellClass.remove('el-popover__reference')
                    this.curNumCell = null
                }
                this.$nextTick(() => {
                    this.curNumCell = cell
                    this.$nextTick(() => {
                        const popover = this.$refs.numPopover
                        popover?.doShow()
                    })
                })
            }
        },
        closePopover() {
            if (this.$refs.numPopover) {
                this.$nextTick(() => {
                    const popover = this.$refs.numPopover
                    popover.doClose()
                })
            }
        },