adminBigData/src/views/manager/index.vue

<template>
  <div class="page_item">
    <div class="page_search">
      <div class="search_content">
        <div class="content_left">
          <el-input placeholder="请输入姓名或账号"  v-model="keyWord"  class="input_width">
            <el-button @click="GoSearch()"  slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
        <div class="content_right">
          <el-button   >刷新</el-button>
          <el-button type="primary" @click="AddMultiExam" >
                新增用户
          </el-button>
        </div>
      </div>
    </div>
    <div class="page_jg_20"></div>
    <div class="page_table">
      <el-table :data="tableData" stripe  
          :key="tableKey"
          v-loading="tableLoading"
          element-loading-text="拼命加载中……"
            element-loading-spinner="el-icon-loading"
            element-loading-background="#ffffff"
           row-key="studentId">
           
            <el-table-column type="index" label="序号" :index="GetIndexNumber"   align="center" width="50"  fixed="left"></el-table-column>
            
            <el-table-column prop="account" label="账号" align="center"  show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="userName" label="姓名" align="center"  show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="stateName" label="状态" align="center"  show-overflow-tooltip>
              <template #default="scope">
                <div class="table_row_status">
                    
                    <!-- 需汇总 -->
                    <div class="need_summary_icon" v-if="scope.row.state==1"></div>
                    <!-- 汇总中 改成成绩中 -->
                    <div class="score_look_icon" v-else-if="scope.row.state==4"></div>
                    <!-- 已发布 -->
                    <div class="yes_release_icon" v-else-if="scope.row.state==2"></div>
                    <!-- 已关闭 -->
                    <div class="ready_close_icon" v-else-if="scope.row.state==3"></div>
                    <!-- 未发布 -->
                    <div class="no_release_icon" v-else></div>
                    {{ scope.row.stateName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="loginTime" label="最后登录时间" align="center"  show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" min-width="120">
                <template #default="scope">
                  <div class="table_row_option">
                  
                      <div  class="button_editor"  @click="EditorStudent(scope.row)">编辑</div>
                    
                      <div  class="button_delete"  @click="DeleteStudent(scope.row)">删除</div>
                  </div>
                </template>
            </el-table-column>
          </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref ,onMounted, onBeforeUnmount} from 'vue'
const tableData = ref([]);//表格数据
const tableLoading = ref(false);//表格加载loading
const tableKey = ref(0);//用于强制刷新table
const keyWord = ref('');//搜索关键词

const GetTableData=async()=>{
  try{
      // tableLoading.value=true;
      // const res=await fetch('/api/manager/getStudents');
      // if(res.code===200)
      // {
      //   tableData.value=res.data || [];
      // }
      tableData.value=[
        {
          account: '182900',
          userName: '杨晓正',
          phone: '13552478041',
          state: '0',
          stateName: '正常',
          loginTime: '2024-10-15',
        },
        {
          account: '182900',
          userName: '杨晓正',
          phone: '13552478041',
          state: '1',
          stateName: '封禁',
          loginTime: '2024-10-15',
        },
        {
          account: '182900',
          userName: '杨晓正',
          phone: '13552478041',
          state: '1',
          stateName: '封禁',
          loginTime: '2024-10-15',
        }
      ];
  }catch(error)
  {
    console.error('获取数据失败:', error)
  }finally
  {
    tableLoading.value = false
  }
}
// 组件挂载时自动加载数据
onMounted(() => {
  GetTableData()//加载表格数据
})

// 表格相关方法
function GetIndexNumber(index) {
  return index + 1
}

</script>

<style>

</style>