Element UI - el-table-column 属性之 show-overflow-tooltip 爬坑

在 Element UI 框架中，el-table-column 属性 show-overflow-tooltip 意思是：当内容过长被隐藏时显示 tooltip（默认值为 false）。但是有时候会出现一些莫名其妙的BUG，比如，和 el-form 配合使用时，鼠标碰上去会显示报错的信息而不是内容的信息，还有一些很奇葩的显示。所以本文给大家带来一个替代方案...

解决方案：el-tooltip + filter + ellipsis

下面举例一个伪代码（此场景是对el-table可进行编辑单元格），思路看懂了就行，用的也是此框架中的另一个组件——“el-tooltip”。

HTML

<el-table-column label="自定义名称">
  <template slot-scope="scope">
    <el-tooltip effect="dark" :content="scope.row.customparamName" :disabled="scope.row.customparamName | ellipsis" placement="top">
      <div>
        <span v-if="scope.row.isRead" class="ellipsis diyname-ellipsis-width">{{ scope.row.customparamName }}</span>
        <el-form-item v-else :prop="'table.' + scope.$index + '.customparamName'" :rules="rules.customparamName">
          <el-input class="edit-input" v-model="scope.row.customparamName" placeholder="输入自定义名称" />
        </el-form-item>
      </div>
    </el-tooltip>
  </template>
</el-table-column>

Ps：注意这里 el-tooltip 子节点里只能有一个节点，多个的话会出BUG。

Style

.diyname-ellipsis-width {
  display: inline-block;
  width: 118px;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

JS

filters: {
  ellipsis (value) {
    // console.log('ellipsis value:'+ value)
    let width = getTextWidth(value)
    // console.log(width)
    if (width > 110) {
      return false
    }
    return true
  }
}