vue3 el-dialog文件上传 文件名字过长自动换行

根据提供的引用内容，可以通过以下方法实现Vue3中el-dialog文件上传时文件名字过长自动换行：

1. 使用CSS样式控制文件名字的显示方式，设置`white-space: pre-wrap;`属性来实现自动换行。

<el-dialog>
  <el-upload>
    <span slot="trigger" class="file-name">{{ fileName }}</span>
  </el-upload>
</el-dialog>

<style>
.file-name {
  white-space: pre-wrap;
}
</style>

2. 使用Vue的计算属性来处理文件名字的换行逻辑。

<el-dialog>
  <el-upload>
    <span slot="trigger">{{ wrappedFileName }}</span>
  </el-upload>
</el-dialog>

<script>
export default {
  data() {
    return {
      fileName: 'This is a very long file name that needs to be wrapped',
    };
  },
  computed: {
    wrappedFileName() {
      const maxLength = 10; // 设置最大显示长度
      if (this.fileName.length > maxLength) {
        return this.fileName.substring(0, maxLength) + '...'; // 超过最大长度时截断并添加省略号
      }
      return this.fileName;
    },
  },
};
</script>