vue实现判断文本是否超出，超出后显示省略号并且hover展示全部内容，未超出的不加 Popover 弹出框

这里的例子是在一个表格中，对其中一列的数据操作，文字超过6行就省略，并且用Popover组件来显示全部内容；如果不超过6行，则正常显示。

🌰：

// 样式
::v-deep .ellipsis6 {
  .cell {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
  }
}

// 页面
<el-table
  v-loading="listLoading"
  :data="list"
  border
  fit
  highlight-current-row
  class="ellipsis6"	// 给整个表格的列设置一个ellipsis省略
  style="width: 100%"
  :header-cell-style="{ background: '#EDF3FF' }"
  row-key="id"
  @selection-change="handleSelectionChange"
>

// 示例部分
<el-table-column :key="componentKey" align="center" label="栗子">
  <template slot-scope="{row, $index}">
    <el-popover
      v-if="!popBool[$index]"
      placement="top"
      width="500"
      trigger="hover"
      :content="row.title"
    >
      <span
        :ref="'text' + $index"
        slot="reference"
      >{{ row.title }}</span>
    </el-popover>
    <span v-else>{{ row.title }}</span>
  </template>
</el-table-column>

// javascript
data() {
	return {
		componentKey: 0,
    	popBool: [] // false显示pop，true不显示
	}
},

methods: {
	// 获取列表
	getList() {
	  this.listLoading = true
	  getList(this.listQuery).then((res) => {
	    this.listLoading = false
	    if (res.status) {
	      this.list = res.data.list
	      this.total = res.data.total
	
		  // 在获取到数据之后加个延时，等dom节点渲染完毕后，再通过ref属性获取dom节点。
	      setTimeout(() => {
	        for (var i = 0; i < this.list.length; i++) {
	          var lineHeight = getComputedStyle(this.$refs['text' + i]).lineHeight.replace('px', '') - 0
	          // 单行文字的行高，此例子中超出6行后省略，故下面要乘6。
	          var scrollHeight = this.$refs['text' + i].scrollHeight
	          // (2023-01-12 修改offsetHeight为scrollHeight，scrollHeight才是文字的实际高度)
	          scrollHeight > lineHeight * 6 ? this.popBool[i] = false : this.popBool[i] = true
	          // 如果自身的高度大于6行文字的高度，则表示有省略部分。
	          this.componentKey++
	          // 改变key，对组件重新渲染。
	        }
	      }, 500)
	    }
	  })
	}
}