vue 运用elementui 导入json文件

你可以使用 `axios` 库来获取 `JSON` 文件，并使用 `element-ui` 的表格组件来展示数据。以下是一个简单的示例代码：

<template>
  <el-container>
    <el-header>
      <el-upload
        class="upload-demo"
        :auto-upload="false"
        :on-change="handleChange"
        :before-upload="beforeUpload"
      >
        <el-button slot="trigger" size="small" type="primary">选择JSON文件</el-button>
      </el-upload>
    </el-header>
    <el-main>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    async handleChange(file) {
      if (!file || !file.raw) {
        return;
      }
      const content = await this.readFileAsync(file.raw);
      this.tableData = JSON.parse(content);
    },
    beforeUpload(file) {
      const isJson = file.type === 'application/json';
      if (!isJson) {
        this.$message.error('只能上传JSON文件');
      }
      return isJson;
    },
    readFileAsync(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => {
          resolve(reader.result);
        };
        reader.onerror = reject;
        reader.readAsText(file);
      });
    },
  },
};
</script>

在上面的代码中，我们使用 `el-upload` 组件来上传 `JSON` 文件，并使用 `axios` 库来获取文件内容。在 `handleChange` 方法中，我们调用 `readFileAsync` 方法读取文件内容，并将其解析成对象，然后将其赋值给 `tableData` 属性。在模板中，我们使用 `el-table` 组件来展示数据。