当前位置：首页 > news >正文

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

news 来源：原创 2025/6/8 13:54:21

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

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

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="name"
        label="Name"
        width="200">
      </el-table-column>
      <el-table-column
        prop="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 表格实现指定列内容溢出时自动加省略号，并确保每一行都有效。