el-table 单元格文字 显示问题，缩略显示 tooltip 样式 显示错误

`el-table` 是Element UI库中的表格组件，在表格单元格中，有时可能会遇到文本过长导致显示不全的问题。在这种情况下，可以利用Vue的特性结合Element UI提供的`tooltip`插件实现文本的缩略显示，并添加自定义样式以展示错误信息。

当你想要在一个单元格内显示大量文本，但又不想让文本完全溢出时，可以在单元格内容旁边添加一个`<span>`标签并设置其`title`属性为完整的文本，同时为其包裹上`element-tooltip`组件。这样当鼠标悬停在该区域时，会弹出一个提示框，显示全部的文字内容：

<template>
  <el-table-column label="标题">
    <template slot-scope="scope">
      <span :title="scope.row.longText" class="long-text">
        {{ scope.row.text }}
      </span>
      <el-tooltip :popper-class="'error-tooltip'" placement="top">
        <i v-if="scope.row.error" class="el-icon-warning error-indicator"></i>
        <span slot="content">{{ scope.row.errorMessage }}</span>
      </el-tooltip>
    </template>
  </el-table-column>
</template>

<style scoped>
.long-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.error-tooltip {
  background-color: #f50; /* 自定义错误提示颜色 */
}
</style>

在这个例子中，`text`字段用于显示缩略文本，而`longText`存储完整的内容。如果`row.error`为真，则显示一个带有警告图标的小提示，`errorMessage`则对应于错误的具体消息。