aurora-admin/frameworks/Table.vue3.vue

<template>
  <div class="kole-table">
    <table>
      <thead>
        <tr>
          <th v-if="selectable" class="col-selection" style="width:48px">
            <input
              type="checkbox" class="checkbox"
              :checked="allSelected"
              :indeterminate.prop="someSelected"
              @change="toggleAll"
            >
          </th>
          <th
            v-for="col in columns" :key="col.key || col.title"
            :class="[{ 'align-right': col.align === 'right' }, { 'sortable': col.sortable }, col.fixed ? 'col-fixed' : '']"
            :style="col.width ? { width: col.width + 'px' } : null"
            @click="onSort(col)"
          >
            {{ col.title }}
            <span v-if="col.sortable" class="sort-ind" :class="{ active: sortKey === col.key }">
              {{ sortKey === col.key ? (sortOrder === 'asc' ? '↑' : sortOrder === 'desc' ? '↓' : '↕') : '↕' }}
            </span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="!sortedData.length">
          <td class="empty" :colspan="colCount">{{ emptyText }}</td>
        </tr>
        <tr
          v-for="(row, index) in sortedData" :key="row[rowKey]"
          :class="{ 'is-selected': isSelected(row[rowKey]) }"
        >
          <td v-if="selectable" class="col-selection">
            <input type="checkbox" class="checkbox" :checked="isSelected(row[rowKey])" @change="toggleRow(row[rowKey])">
          </td>
          <td
            v-for="col in columns" :key="col.key || col.title"
            :class="[{ 'align-right': col.align === 'right' }, col.fixed ? 'col-fixed' : '', col.type === 'action' ? 'col-action' : '']"
          >
            <slot v-if="col.type === 'action'" name="action" :row="row" :index="index"></slot>
            <template v-else>{{ row[col.key] }}</template>
          </td>
        </tr>
      </tbody>
    </table>
    <div v-if="loading" class="loading-mask"><span class="spinner"></span></div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';

const props = defineProps({
  columns: { type: Array, required: true },          // [{ key, title, align, sortable, width, fixed, type }]
  data: { type: Array, default: () => [] },
  rowKey: { type: String, default: 'id' },
  selectable: { type: Boolean, default: false },
  selectedKeys: { type: Array, default: () => [] },   // v-model:selectedKeys
  loading: { type: Boolean, default: false },
  emptyText: { type: String, default: '暂无数据' }
});

const emit = defineEmits(['update:selectedKeys', 'selection-change', 'sort-change']);

const sortKey = ref(null);
const sortOrder = ref(null);   // asc | desc | null

const colCount = computed(() => props.columns.length + (props.selectable ? 1 : 0));
const allSelected = computed(() => props.data.length > 0 && props.selectedKeys.length === props.data.length);
const someSelected = computed(() => props.selectedKeys.length > 0 && props.selectedKeys.length < props.data.length);

const sortedData = computed(() => {
  if (!sortKey.value) return props.data;
  const k = sortKey.value;
  const dir = sortOrder.value === 'asc' ? 1 : -1;
  return [...props.data].sort((a, b) => {
    const av = a[k], bv = b[k];
    if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * dir;
    return String(av).localeCompare(String(bv), 'zh') * dir;
  });
});

function isSelected(id) { return props.selectedKeys.includes(id); }
function toggleRow(id) {
  const next = isSelected(id)
    ? props.selectedKeys.filter(x => x !== id)
    : [...props.selectedKeys, id];
  emit('update:selectedKeys', next);
  emit('selection-change', next);
}
function toggleAll() {
  const next = allSelected.value ? [] : props.data.map(r => r[props.rowKey]);
  emit('update:selectedKeys', next);
  emit('selection-change', next);
}
function onSort(col) {
  if (!col.sortable) return;
  if (sortKey.value !== col.key) {
    sortKey.value = col.key; sortOrder.value = 'asc';
  } else {
    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : sortOrder.value === 'desc' ? null : 'asc';
    if (sortOrder.value === null) sortKey.value = null;
  }
  emit('sort-change', { key: sortKey.value, order: sortOrder.value });
}
</script>

<!-- 样式对齐 components.css 与 table.json 契约 -->
<style scoped>
.kole-table { width: 100%; border: 1px solid #E8ECF1; border-radius: 8px; overflow: hidden; background: #fff; position: relative; }
.kole-table table { width: 100%; border-collapse: collapse; font-size: 14px; color: #262626; }
.kole-table thead th {
  background: #FAFAFA; color: #262626; font-weight: 600; height: 48px; text-align: left;
  padding: 0 16px; border-bottom: 1px solid #E8ECF1; white-space: nowrap;
}
.kole-table tbody td { height: 48px; padding: 0 16px; border-bottom: 1px solid #E8ECF1; text-align: left; }
.kole-table tbody tr:last-child td { border-bottom: none; }
.kole-table tbody tr:hover { background: #F5F7FA; }
.kole-table tbody tr.is-selected { background: #F0F5FF; }
.kole-table .align-right { text-align: right; }
.kole-table .sortable { cursor: pointer; user-select: none; }
.kole-table .sort-ind { color: #767676; margin-left: 4px; }
.kole-table .sort-ind.active { color: #2F54EB; }
.kole-table .col-action { text-align: right; }
.kole-table .col-selection { text-align: center; }
.kole-table .checkbox { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }
.kole-table .empty { padding: 48px 16px; text-align: center; color: #767676; font-size: 14px; }
.kole-table .loading-mask {
  position: absolute; inset: 0; background: rgba(255,255,255,0.7); display: flex;
  align-items: center; justify-content: center; z-index: 2;
}
.kole-table .spinner {
  width: 20px; height: 20px; border: 2px solid #2F54EB; border-top-color: transparent;
  border-radius: 50%; animation: kole-tbl-spin .6s linear infinite;
}
@keyframes kole-tbl-spin { to { transform: rotate(360deg); } }
</style>