攻克Vue3 El-table中的内容超出难题：各种情况的省略提示方案

2023-12-08 13:47:26

Vue3 El-table 省略提示指南：优化表格数据展示

Vue3 中的 El-table 组件是构建表格数据展示的利器，但当表格数据较多时，内容可能会超出列宽，影响用户体验。为了解决这一问题，我们可以通过设置省略提示来优化展示效果，让表格内容在有限的空间内得到合理呈现。

1. 表头省略提示

在表头设置省略提示，可以帮助用户快速了解列的含义，尤其是在表格列较多的时候。通过设置 label 属性来实现表头的省略提示，代码如下：

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

设置 show-overflow-tooltip 属性为 true，即可在表头内容超出列宽时显示省略提示。

2. 表体省略提示

表体的内容往往是表格中的重点信息，我们可以通过设置 cell-class-name 属性来实现表体内容的省略提示，代码如下：

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

设置 cell-class-name 属性为 "table-cell-ellipsis"，即可在表体内容超出列宽时显示省略提示。

3. 表尾省略提示

表尾的内容通常是统计数据或汇总信息，我们也可以通过设置 footer-label 属性来实现表尾内容的省略提示，代码如下：

<el-table-column
  prop="name"
  label="姓名"
  width="100px"
  footer-label="合计："
  show-overflow-tooltip
>
</el-table-column>

设置 show-overflow-tooltip 属性为 true，即可在表尾内容超出列宽时显示省略提示。

4. 单行省略提示

在某些情况下，我们可能只需要对单行内容进行省略提示。通过设置 show-overflow-tooltip 属性来实现单行内容的省略提示，代码如下：

<el-table-column
  prop="name"
  label="姓名"
  width="100px"
  show-overflow-tooltip
>
  <template #default="scope">
    <span>{{ scope.row.name }}</span>
  </template>
</el-table-column>

在 default 模板中设置 show-overflow-tooltip 属性为 true，即可对单行内容进行省略提示。

5. 多行省略提示

如果我们需要对多行内容进行省略提示，我们可以通过设置 row-class-name 属性来实现多行内容的省略提示，代码如下：

<el-table
  :data="tableData"
  row-class-name="table-row-ellipsis"
>
  <el-table-column
    prop="name"
    label="姓名"
    width="100px"
  >
    <template #default="scope">
      <span>{{ scope.row.name }}</span>
    </template>
  </el-table-column>
</el-table>