如何在 Vue3 中使用 Element Plus 实现表格单元格内容超出时自动换行显示？

在 Vue3 中使用 Element Plus 实现表格单元格内容超出时自动换行显示，你可以通过将表格列的 `cell` 标签中的文本内容包装在一个可换行的标签如 `el-input` 或者自定义的 `<span>` 并设置 CSS 属性 `white-space: break-word` 来实现。以下是基本步骤：

1. 安装 Element Plus：首先确保已经安装了 Element Plus，并在你的 Vue 组件文件中引入它。

<template>
  <el-table :data="tableData">
    <!-- ... -->
    <el-table-column label="标题" prop="content" :formatter="formatContent">
      <!-- 下面的模板将会用于处理单元格内容 -->
      <template slot-scope="{ row }">
        <span v-html="row.content | formatWithBreakWord"></span>
      </template>
    </el-table-column>
    <!-- ... -->
  </el-table>
</template>

<script setup>
import { ref } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';

const tableData = ref([
  // ...
]);

function formatContent(value) {
  return { content: value.replace(/((\r\n|\n|\r|\t)|\s{2,})+/g, '<br>'), };
}
</script>

<style scoped>
.el-table .el-table__body tr td span {
  white-space: break-word;
}
</style>

这里我们创建了一个 `formatContent` 函数，当渲染单元格时，会先对 `content` 进行处理，用 `v-html` 渲染并插入 `<br>` 标签来指示换行。同时，我们还添加了 CSS 规则，确保 `span` 元素内的文本会在需要时换行。