aurora-admin/frameworks/Table.vue2.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"
              v-indeterminate="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>
export default {
  name: 'KoleTable',
  directives: {
    indeterminate(el, binding) { el.indeterminate = !!binding.value; }
  },
  props: {
    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: () => [] },
    loading: { type: Boolean, default: false },
    emptyText: { type: String, default: '暂无数据' }
  },
  data() {
    return { sortKey: null, sortOrder: null };   // order: asc | desc | null
  },
  computed: {
    colCount() {
      return this.columns.length + (this.selectable ? 1 : 0);
    },
    allSelected() {
      return this.data.length > 0 && this.selectedKeys.length === this.data.length;
    },
    someSelected() {
      return this.selectedKeys.length > 0 && this.selectedKeys.length < this.data.length;
    },
    sortedData() {
      if (!this.sortKey) return this.data;
      const k = this.sortKey;
      const dir = this.sortOrder === 'asc' ? 1 : -1;
      return [...this.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;
      });
    }
  },
  methods: {
    isSelected(id) { return this.selectedKeys.includes(id); },
    toggleRow(id) {
      const next = this.isSelected(id)
        ? this.selectedKeys.filter(x => x !== id)
        : [...this.selectedKeys, id];
      this.$emit('update:selectedKeys', next);
      this.$emit('selection-change', next);
    },
    toggleAll() {
      const next = this.allSelected ? [] : this.data.map(r => r[this.rowKey]);
      this.$emit('update:selectedKeys', next);
      this.$emit('selection-change', next);
    },
    onSort(col) {
      if (!col.sortable) return;
      if (this.sortKey !== col.key) {
        this.sortKey = col.key; this.sortOrder = 'asc';
      } else {
        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : this.sortOrder === 'desc' ? null : 'asc';
        if (this.sortOrder === null) this.sortKey = null;
      }
      this.$emit('sort-change', { key: this.sortKey, order: this.sortOrder });
    }
  }
};
</script>

<!-- 样式对齐 components.css 与 table.json 契约 -->
<style>
.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>