el-upload上传的多个文件分两列展示

`el-upload` 是 Element UI 提供的一个用于文件上传的组件，在处理上传多个文件时，如果需要按照两列的方式展示，你可以结合 CSS 和 Vue 的动态绑定来实现。首先，你需要在模板上设置一个列表容器，并给每个上传项添加一个动态的 `v-for` 循环：

<template>
  <div class="upload-container">
    <el-upload
      :action="uploadUrl"
      :multiple="true"
      :on-success="handleSuccess"
      list-type="inline"
    >
      <el-button size="small">选择文件</el-button>
    </el-upload>

    <ul class="file-list">
      <li v-for="(file, index) in uploadedFiles" :key="index">
        <span>{{ file.name }}</span>
        <!-- 这里可以添加一个按钮或其他元素来控制显示/隐藏 -->
        <button @click="toggleColumns(index)">切换列</button>
        <transition name="fade">
          <p v-if="showTwoColumns[index]">{{ file.url }}</p>
        </transition>
      </li>
    </ul>
  </div>
</template>

然后，在你的样式(`styles`)或者单独的 CSS 文件中，你可以创建 `.file-list li` 的两个状态（如 `.column-1` 和 `.column-2`），并调整布局。

Vue 部分：

<script>
export default {
  data() {
    return {
      uploadUrl: '',
      uploadedFiles: [],
      showTwoColumns: [], // 初始时假设所有文件都显示在第一列
      toggleColumnsIndex: -1,
    };
  },
  methods: {
    handleSuccess(response, file) {
      this.uploadedFiles.push(file);
      this.showTwoColumns.push(this.toggleColumnsIndex >= 0); // 如果已有切换列操作，则改变对应文件的列
    },
    toggleColumns(index) {
      this.toggleColumnsIndex = index;
      this.showTwoColumns[index] = !this.showTwoColumns[index]; // 切换当前文件在两列中的位置
    },
  },
};
</script>

当用户点击“切换列”按钮时，`toggleColumns` 方法会被触发，改变指定索引对应的文件在 `showTwoColumns` 数组中的值，进而切换它的列显示效果。