my-bigScreen/screen-vue/src/views/desktop/components/Alert.vue

<template>
  <div class="table-container">
    <div class="main-card">
      <div class="title-section">
        <h1 class="title">预警信息</h1>
      </div>
      <div class="divider"></div>
      <div class="content-section">
        <div class="table-wrapper">
          <el-table
            :data="tableData"
            border
            :header-cell-style="{ background: '#f5f7fa' }"
            style="width: 100%;"
            height="100%"
            v-loading="loading"
          >
            <el-table-column
              prop="name"
              label="姓名"
              width="120"
              fixed="left"
            />
            <el-table-column
              prop="age"
              label="年龄"
              width="80"
            />
            <el-table-column
              prop="gender"
              label="性别"
              width="80"
            />
            <el-table-column
              prop="phone"
              label="手机号"
              width="150"
            />
            <el-table-column
              prop="email"
              label="邮箱"
              width="200"
            />
            <el-table-column
              prop="address"
              label="地址"
              width="250"
            />
            <el-table-column
              prop="company"
              label="公司"
              width="180"
            />
            <el-table-column
              prop="position"
              label="职位"
              width="150"
            />
            <el-table-column
              prop="salary"
              label="薪资"
              width="120"
            />
            <el-table-column
              prop="entryDate"
              label="入职日期"
              width="150"
              fixed="right"
            />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElTable, ElTableColumn, ElLoading } from 'element-plus'

// 生成模拟数据
const generateTableData = () => {
  const data = []
  const names = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十']
  const genders = ['男', '女']
  const positions = ['前端开发', '后端开发', '产品经理', 'UI设计', '测试工程师', '运维工程师']
  const companies = ['科技有限公司', '网络科技公司', '信息技术公司', '数据服务公司']
  
  for (let i = 1; i <= 50; i++) {
    data.push({
      id: i,
      name: names[Math.floor(Math.random() * names.length)] + i,
      age: Math.floor(Math.random() * 30) + 20,
      gender: genders[Math.floor(Math.random() * genders.length)],
      phone: `13${Math.floor(Math.random() * 900000000) + 100000000}`,
      email: `user${i}@example.com`,
      address: `北京市朝阳区某某街道${Math.floor(Math.random() * 100)}号`,
      company: Math.floor(Math.random() * 10) + '号' + companies[Math.floor(Math.random() * companies.length)],
      position: positions[Math.floor(Math.random() * positions.length)],
      salary: `${Math.floor(Math.random() * 30) + 10}k`,
      entryDate: `202${Math.floor(Math.random() * 5) + 1}-${Math.floor(Math.random() * 12) + 1}-${Math.floor(Math.random() * 28) + 1}`
    })
  }
  return data
}

const tableData = ref([])
const loading = ref(true)

onMounted(() => {
  // 模拟接口请求延迟
  setTimeout(() => {
    tableData.value = generateTableData()
    loading.value = false
  }, 500)
})
</script>

<style scoped>
.table-container {
  width: 100%;
  height: 100%;
  padding: 2px;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.main-card {
  width: 100%;
  height: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.title-section {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  box-sizing: border-box;
  background-color: #f9fafb;
  display: flex;
  align-items: center;
  margin: 0;
  border-radius: 4px 4px 0 0;
}

.title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.divider {
  width: 100%;
  height: 1px;
  background-color: #e5e7eb;
}

.content-section {
  flex: 1;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  display: flex;
  align-items: center;
}

.table-wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
}

:deep(.el-table__body-wrapper) {
  overflow: auto;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  display: block;
  height: 6px;
  width: 6px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
  background: #f1f1f1;
  border-radius: 3px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  background: #dcdfe6;
  border-radius: 3px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb:hover) {
  background: #c0c4cc;
}

:deep(.el-table__fixed-left) {
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.05);
}

:deep(.el-table__fixed-right) {
  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.05);
}

:deep(.el-table th) {
  font-weight: 600;
  color: #303133;
}
</style>