elementUI中template自定義文本後show-overflow-tooltip失效解決

  最近在開發中發現使用elementUI中template自定義文本，由於文本的長度較長，縮略展示配置:show-overflow-tooltip="true"，但沒起作用。

<el-table
      :data="dataSource"
      :max-height="tableH"
      :height="tableH"
      v-loading.body="loading"
      border
      style="width: 100%; margin-top: 10px;">
      <el-table-column
        prop="date"
        label="運營日"
        :formatter="formatDate"
        :show-overflow-tooltip="true"
        width="40">
      </el-table-column>
      <el-table-column
        label="號碼"
        :show-overflow-tooltip="true"
        width="60">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <p>
               {{scope.row.airCrftRegNbr}}&nbsp;&nbsp;測試一下長文本展示效果
            </p>
          </div>
        </template>
      </el-table-column>
 </el-table>

效果如圖所示：

解決方法：

<el-table
      :data="dataSource"
      :max-height="tableH"
      :height="tableH"
      v-loading.body="loading"
      border
      style="width: 100%; margin-top: 10px;">
      <el-table-column
        prop="date"
        label="運營日"
        :formatter="formatDate"
        :show-overflow-tooltip="true"
        width="40">
      </el-table-column>
      <el-table-column
        label="號碼"
        :show-overflow-tooltip="true"
        width="60">
        <template slot-scope="scope">
          <span v-html="show(scope.row)"></span>
        </template>
      </el-table-column>
</el-table>

<script>
  methods: {
      show(row) {
        return row.airCrftRegNbr + "&nbsp;&nbsp;測試一下長文本展示效果"
      }
  }
</script>

效果：

使用v-html是爲了將  空格佔位符展示出來。

如果不涉及到轉換爲html效果的話，可以在el-table 中配置 

:formatter   如下圖：

再在methods寫：

/**
 * 格式化起降時間
 */
formatQjsj(row, column, cellValue, index) {
  ......
}

此時縮略效果也能正常展示，但是如果要使用空格佔位符就不行了，  會被解析成文本並在表格列中展示出來，而不是顯示空格佔位符。