<script lang="ts" setup>
import type { UploadFile } from "element-plus/es/components/upload/src/upload";
import { ref } from "vue";
import axios from "axios";
const userList = ref([]);
const handleFileChange = (file: UploadFile) => {
  axios({
    url: "/api/read-user-excel",
    method: "post",
    data: { file: file.raw },
    headers: {
      "Content-Type": "multipart/form-data",
    },
  }).then((res) => {
    userList.value = res.data.data;
  });
};
</script>

<template>
  <div>
    <el-row justify="end">
      <el-upload
        class="excel-upload"
        accept=".xlsx,.xls"
        :show-file-list="false"
        :auto-upload="false"
        :limit="1"
        @change="handleFileChange"
      >
        <el-button size="small" type="primary">导入excel</el-button>
      </el-upload>
    </el-row>
    <el-table :data="userList">
      <el-table-column label="id" prop="id"></el-table-column>
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column label="性别" prop="gender"></el-table-column>
      <el-table-column label="手机号" prop="phone"></el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.xxxx {
  .bbbb {
    color: red;
  }

  .red {
    color: red;
  }
}
</style>