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) {
  ......
}

此时缩略效果也能正常展示，但是如果要使用空格占位符就不行了，  会被解析成文本并在表格列中展示出来，而不是显示空格占位符。