vue el-table-column 单元表格的 省略号 实现

要对 el-table-column 的某一列中的每个单元格值进行处理，使其在文本内容超出指定宽度时显示省略号（…），可以通过以下方法实现：

1. 使用 scoped slots：利用 Element UI 提供的 scoped slots 自定义单元格内容。
2. CSS 样式控制：使用 CSS 的 text-overflow 属性实现文本溢出时显示省略号。
   示例代码
   下面是一个详细的示例，展示如何在 el-table 中应用这些技术：

<template><div><el-table :data="tableData" style="width: 100%"><el-table-columnprop="name"label="Name"width="200"></el-table-column><el-table-columnprop="description"label="Description"width="300"><template slot-scope="scope"><div class="overflow-ellipsis">{{ scope.row.description }}</div></template></el-table-column></el-table></div>
</template><script>
export default {data() {return {tableData: [{ name: 'John', description: 'This is a very long description that should be truncated with ellipsis.' },{ name: 'Jane', description: 'Another long text example for testing the ellipsis.' }// other rows...]};}
}
</script>
<style scoped>
.overflow-ellipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%; /* Ensure it takes the full width of the column */
}
</style>

例子2

<el-table-column prop="relationPhoneNum" label="号码总数" width="80" align="left" show-overflow-tooltip>
<template slot-scope="scope"><div class="overflow-ellipsis" v-for="(item,index) in scope.row.relationPhoneNum" :key="index"> {{ item }} </div>
</template></el-table-column>/script>
<style scoped>
.overflow-ellipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%; /* Ensure it takes the full width of the column */
}
</style>

解释
Scoped Slots：在 el-table-column 元素中，我们使用 来自定义每个单元格的渲染方式。scope.row.description 用来访问表格当前行的 description 字段。

CSS 样式：

.overflow-ellipsis 类应用了 white-space: nowrap; 防止文本自动换行。
overflow: hidden; 隐藏溢出的文本部分。
text-overflow: ellipsis; 指定文本超出容器时显示省略号。
宽度管理：确保为 el-table-column 设置了 width 属性，以便固定列宽，从而保证 CSS 的生效。

注意事项
样式作用域：如果你希望该样式仅影响特定的表格组件，确保将样式放置在具有 scoped 属性的

宽度的一致性：确保 CSS 样式中设置的宽度与 el-table-column 的宽度保持一致，如果需要，可以将 CSS 宽度设置为 width: 100%;。

这样，你就能在 Vue 应用中使用 Element UI 表格实现指定列内容溢出时自动加省略号，并确保每一行都有效。