vue上传Excel文件并直接点击文件列表进行预览

在Vue中，你可以使用element-ui的Upload组件来上传Excel文件，并使用el-table来展示文件列表，并允许预览。以下是一个简单的例子：

1. 安装element-ui：

npm install element-ui --save

2. 在你的Vue组件中使用它：

<template>
  <div>
    <el-upload
      ref="upload"
      action="#"
      :on-change="handleFileChange"
      :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    </el-upload>
    <el-table :data="fileList" style="width: 100%;">
      <el-table-column prop="name" label="文件名"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handlePreview(scope.row)" size="small">预览</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
        fileList: []
      };
    },
    methods: {
      handleFileChange(file, fileList) {
        this.fileList = fileList.map(item => ({
          id: item.uid,
          name: item.name
        }));
      },
      handlePreview(file) {
        // 这里可以使用第三方库如xlsx来解析Excel文件并展示
        console.log('Preview file:', file);
        // 模拟文件预览，实际应用中可能需要使用其他方式展示Excel内容
      }
    }
  };
</script>

在这个例子中，我们使用了el-upload组件来上传文件，并通过:on-change来监听文件选择的变化。每次选择文件后，文件信息会被保存到fileList数组中，并可以点击每行的“预览”按钮来查看对应文件。

请注意，实际的文件预览可能需要使用第三方库如xlsx来解析Excel文件内容，并在前端显示。这个例子中，handlePreview方法仅仅是模拟了文件预览的动作，你需要根据实际需求来实现文件内容的解析和展示。