vue +element 表格中span 标签超长显示

如果在Vue和Element UI的表格中，想要使超长的文本内容显示为省略号（...），可以使用Element UI提供的el-tooltip组件。

首先，确保已经按照Element UI的官方文档正确引入了el-tooltip组件。

然后，在表格的列定义中，对需要显示超长文本的列进行处理。例如，如果有一个name列，需要显示超长的文本内容，可以这样处理：

1. 在表格列定义中，对name列添加scoped-slot属性，指定一个自定义的插槽，例如slot-scope="scope"。
2. 在自定义的插槽中，使用el-tooltip组件包裹需要显示的文本内容，并设置content属性为scope.row.name，即该行的name属性值。

示例代码如下：

<el-table :data="tableData">
  <el-table-column prop="id" label="ID"></el-table-column>
  <el-table-column prop="name" label="Name">
    <template slot-scope="scope">
      <el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top-start">
        <span>{{ scope.row.name }}</span>
      </el-tooltip>
    </template>
  </el-table-column>
  <el-table-column prop="age" label="Age"></el-table-column>
</el-table>

上述代码中，使用了el-tooltip组件包裹了span标签，当span标签中的内容超长时，会自动显示为省略号，并在鼠标悬停时显示完整的文本内容。

请注意，为了使el-tooltip组件生效，可能需要设置一些样式，例如为el-tooltip组件添加一个类名item，并设置该类名的white-space属性为nowrap，以确保文本不换行。

希望以上信息对您有所帮助！