關注前端小謳，閲讀更多原創技術文章

• 這個問題之前在封裝表格行內編輯校驗時就一直困擾我，近期因為業務需求又不得不面對了

需求詳述

• ElementUi表格列若干（肯定有橫向滾動條），在若干行（不固定）的某一列上（不固定）展示指定文字，
• 要展示的文字長度大概率比該列寬度大
• 文字需要完整展示，可跨單元格

嘗試過程

• 直接使用自定義渲染單元格，失敗，超出單元格部分會被遮蓋
• 自定義指令在document上渲染內容，失敗，定位很困難（很難拿到該單元格相對整個document的位置），且內容也不隨滾動條滾動
• 使用el-tooltip，讓其一直保持展示，失敗，el-tooltip初始化沒有定位，只有在鼠標移入時才有

成功方案

• 使用el-popover彈出框的手動激活方式，其既保證dom結構在單元格里，又能打破內容無法超出單元格的壁壘

<template>
  <el-table-column
    v-for="(column, i) in columnList"
    :key="column.value"
    width="20"
    class-name="gantt-column"
  >
    <template slot-scope="scope">
      <div class="gantt-bar" :style="`background: green`">
        <el-popover
          v-if="scope.row.percent"
          v-model="visible"
          popper-class="gantt-percent-popover"
          trigger="manual"
          :content="`${scope.row.percent}%`"
        >
        </el-popover>
      </div>
    </template>
  </el-table-column>
</template>

<script>
export default {
  data() {
    return {
      columnList: [], // 動態表格列
      visible: true, // popover-始終展示
    };
  },
};
</script>

<style lang="scss">
.gantt-percent-popover {
  width: max-content;
  min-width: auto;
  border: none;
  box-shadow: none;
  background: none;
  padding: 0 !important;
  font-size: 14px;
  color: rgba(0, 0, 0, 1);
  font-weight: bold;
  // text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  height: 23px;
  line-height: 23px;
  transform: translate(-40%, 0);
  font-style: italic;
}
</style>