el-table-column自定义实现el-tooltip效果

说明

使用el-table-column自定义某列内容为左侧展示商品图片，右侧展示商品标题以及id，商品标题超过两行显示省略号，并且鼠标移入在上方显示完整。

界面展示

template

...
<el-table-column label="商品信息" prop="title" min-width="200">
  <template #default="scope">
    <div class="commodity_info">
      <img :src="scope.row.imgs" alt="" srcset="" />
      <div>
        <el-tooltip
        :content="scope.row.title"
        :disabled="scope.row.isShowTool"
        placement="top"
        >
          <div
            class="commodity_title"
            @mouseenter="(e) => showTips(e, scope.$index)"
          >
          	{{ scope.row.title }}
          </div>
        </el-tooltip>
      	<div class="commodity_id">ID:{{ scope.row.id }}</div>
      </div>
    </div>
  </template>
</el-table-column>
...

script

const showTips = (e: any, index: number) => {
  let isShowTool = e.target.scrollHeight == e.target.clientHeight; //true:不显示tooltip
  if (commodityList.value && commodityList.value) {
    commodityList.value[index].isShowTool = isShowTool;
  }
};

style

.commodity_title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}