一行显示多余显示...，hover时显示全部

话不多说，直接上代码。
template

 

      

          {{item.time}}
          【{{item.driver}}】
      
 
 

css

js

 data () {
       tooltipContent: '',
       operateData: [{
        time: '2020-07-08 09:06',
        driver: '王六王六王六王六王六王六王六王六王六王六王六王六王六王六王六王六王六王六王六王六'
      }, {
        time: '2020-07-08 09:06',
        driver: '王六王六王六'
      }],
 }  ,
 methods: { 
	 handleMouseEnter (event) {
	      const li = event.target
	      // use range width instead of scrollWidth to determine whether the text is overflowing
	      // to address a potential FireFox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1074543#c3
	      const range = document.createRange()
	      range.setStart(li, 0)
	      range.setEnd(li, li.childNodes.length)
	      const rangeWidth = range.getBoundingClientRect().width
	      if ((rangeWidth > li.offsetWidth || li.scrollWidth > li.offsetWidth) && this.$refs.tooltip) {
	        const tooltip = this.$refs.tooltip
	        // TODO 会引起整个重新渲染，需要优化
	        this.tooltipContent = li.innerText || li.textContent
	        tooltip.referenceElm = li
	        tooltip.$refs.popper && (tooltip.$refs.popper.style.display = 'none')
	        tooltip.doDestroy()
	        tooltip.setExpectedState(true)
	        tooltip.handleShowPopper()
	      }
	    },
	    handleMouseLeave (event) {
	      const tooltip = this.$refs.tooltip
	      if (tooltip) {
	        tooltip.setExpectedState(false)
	        tooltip.handleClosePopper()
	      }
	    },
    }

视图