这里的例子是在一个表格中,对其中一列的数据操作,文字超过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)
	    }
	  })
	}
}
Logo

前往低代码交流专区

更多推荐