slble-attend/sl.ble_sys-attend/src-js/views/welcome/components/table/index.vue

<script setup lang="ts">
import { useColumns } from "./columns";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { tableData } from "../../data";

const { loading, columns, pagination, Empty, onCurrentChange } = useColumns();
</script>

<template>
  <pure-table
    row-key="id"
    alignWhole="center"
    showOverflowTooltip
    :loading="loading"
    :loading-config="{ background: 'transparent' }"
    :data="
      tableData.slice(
        (pagination.currentPage - 1) * pagination.pageSize,
        pagination.currentPage * pagination.pageSize
      )
    "
    :columns="columns"
    :pagination="pagination"
    @page-current-change="onCurrentChange"
  >
    <template #empty>
      <el-empty description="暂无数据" :image-size="60">
        <template #image>
          <Empty />
        </template>
      </el-empty>
    </template>
    <template #operation="{ row }">
      <el-popover placement="right" :width="400" trigger="click">
        <template #reference>
          <el-button
            plain
            circle
            size="small"
            :title="`查看考勤详情`"
            :icon="useRenderIcon('ri:search-line')"
          />
        </template>
        <el-table :data="row.items">
          <el-table-column width="150" property="name" label="人员名称" />
          <el-table-column width="100" property="confirm" label="到岗状态">
            <template #default="scope">
              <div>{{ scope.row.confirm ? "到岗" : "缺岗" }}</div>
            </template>
          </el-table-column>
          <el-table-column width="100" property="rssi" label="在线状态">
            <template #default="scope">
              <div>{{ scope.row.rssi == 0 ? "离线" : "在线" }}</div>
            </template>
          </el-table-column>
        </el-table>
      </el-popover>
    </template>
  </pure-table>
</template>

<style lang="scss">
.pure-table-filter {
  .el-table-filter__list {
    min-width: 80px;
    padding: 0;

    li {
      line-height: 28px;
    }
  }
}
</style>

<style lang="scss" scoped>
:deep(.el-table) {
  --el-table-border: none;
  --el-table-border-color: transparent;

  .el-empty__description {
    margin: 0;
  }

  .el-scrollbar__bar {
    display: none;
  }
}
</style>