el-table-column超出部分先出省略号

el-table-column是Element UI中的一个表格列组件，用于定义表格的列属性。要实现超出部分先出现省略号的效果，可以使用CSS的文本溢出属性来实现。

首先，需要给el-table-column设置一个固定的宽度，以便控制列的宽度。然后，通过设置列的样式来实现文本溢出省略号的效果。

具体步骤如下：
1. 在el-table-column中设置一个固定的宽度，例如：

<el-table-column prop="name" label="姓名" width="100"></el-table-column>

2. 在el-table-column中使用scoped-slot来自定义列的内容，并在内容中添加样式，例如：

<el-table-column prop="name" label="姓名" width="100">
  <template slot-scope="scope">
    <div class="ellipsis">{{ scope.row.name }}</div>
  </template>
</el-table-column>

3. 在样式中定义.ellipsis类，并设置文本溢出省略号的样式，例如：

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

这样，当表格列中的内容超出列宽时，就会显示省略号。

相关问题

el-table加上border属性后，el-table-column出现省略号

`el-table` 组件的 `border` 属性会在表格的边框上添加边框线，但是这个属性可能会与 `el-table-column` 组件的 `width` 属性产生冲突，导致列的宽度被压缩，从而出现文字省略号的问题。

为了解决这个问题，你可以通过以下两种方式之一：

1. 如果你确实需要 `border` 属性，可以尝试将 `el-table-column` 的 `width` 属性设置为一个比较小的值，并且设置 `min-width` 属性，以确保列的宽度不会被压缩。例如：

<el-table :data="tableData" border>
  <el-table-column prop="name" label="姓名" width="120" :min-width="100"></el-table-column>
  <el-table-column prop="age" label="年龄" width="80" :min-width="60"></el-table-column>
  <el-table-column prop="address" label="地址" width="180" :min-width="120"></el-table-column>
</el-table>

2. 如果你不需要 `border` 属性，你可以尝试使用 `el-table` 组件的 `stripe` 属性或者 `el-table-column` 组件的 `show-overflow-tooltip` 属性来代替。例如：

<el-table :data="tableData" stripe>
  <el-table-column prop="name" label="姓名" width="120" show-overflow-tooltip></el-table-column>
  <el-table-column prop="age" label="年龄" width="80" show-overflow-tooltip></el-table-column>
  <el-table-column prop="address" label="地址" width="180" show-overflow-tooltip></el-table-column>
</el-table>

这样可以确保列的宽度不会被压缩，并且显示省略号时会自动显示提示信息。

el-table-column超出隐藏

要实现el-table-column超出隐藏，可以使用CSS的overflow属性来实现。下面是一个示例代码：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄">
    <template slot-scope="scope">
      <div class="table-column-content">{{ scope.row.age }}</div>
    </template>
  </el-table-column>
</el-table>

<style>
.el-table .table-column-content {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>

在上面的代码中，通过给每个单元格的内容包裹在一个具有固定宽度和隐藏溢出的div元素中，来实现超出内容的隐藏。需要注意的是，要将该样式应用到el-table-column中的内容部分，需要使用slot-scope来访问scope对象，然后在template中添加一个自定义的class（比如`table-column-content`）来应用样式。

这样，当表格中的内容超出列宽时，内容将被隐藏，并显示为省略号。