aurora-admin/frameworks-mobile/Table.uniapp.vue

<template>
  <view class="kole-m-table" :class="rootClass" :data-mode="isCard ? 'card' : 'scroll'">
    <!-- 横向滚动视口：滚动只发生在这里，页面整体不横向溢出（规格 §47.1） -->
    <scroll-view class="kole-m-table__viewport" :scroll-x="!isCard" scroll-y="false">
      <view class="kole-m-table__inner">
        <view class="kole-m-table__head">
          <view class="kole-m-table__row kole-m-table__row--head">
            <view
              v-for="(col, ci) in cols"
              :key="keyOf(col, ci)"
              class="kole-m-table__head-cell"
              :class="headClass(col)"
              :role="'columnheader'"
            >
              <text>{{ col && col.title !== undefined ? col.title : '' }}</text>
            </view>
          </view>
        </view>

        <view v-if="rows.length" class="kole-m-table__body">
          <view
            v-for="(row, ri) in rows"
            :key="row && row.key !== undefined ? String(row.key) : ri"
            class="kole-m-table__row"
            :class="{ 'is-selected': !!(row && row.selected), 'is-disabled': !!(row && row.disabled) }"
            :role="'row'"
            :aria-selected="clickable && !(row && row.disabled) ? (row && row.selected ? 'true' : 'false') : 'false'"
            :aria-disabled="row && row.disabled ? 'true' : 'false'"
            @tap="onRowTap(ri, row)"
          >
            <view
              v-for="(col, ci) in cols"
              :key="keyOf(col, ci) + '-' + ri"
              class="kole-m-table__cell"
              :class="cellClass(col, row, ci)"
              :role="'cell'"
              :data-label="col && col.title !== undefined ? String(col.title) : ''"
            >
              <text>{{ textOf(cellOf(row, col, ci)) }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <text v-if="!rows.length" class="kole-m-table__empty">{{ emptyText }}</text>
    <slot></slot>
  </view>
</template>

<script setup>
/* uni-app 端 · 表格（移动端）— 规格 §47
   跨端差异：小程序没有原生 table，用 view 网格 + role="row" / "cell" / "columnheader" 表达语义；
   横向滚动用 scroll-view（scroll-x）承担 —— 滚动只发生在视口内，页面整体不横向溢出（规格 §47.1）。
   mode=card 时关掉 scroll-x，把每行摊成键值对（字段名由 data-label 生成）。
   表头在卡片模式外始终渲染在内容之前（scroll-view 内不依赖 sticky：小程序 sticky 支持不一）。
   点击一律 @tap；尺寸用 rpx（88rpx = 375pt 下的 44px 触控最小边长）。 */
import { computed } from 'vue';

const props = defineProps({
  columns: { type: Array, default: () => [] },
  rows: { type: Array, default: () => [] },
  mode: { type: String, default: 'scroll' },
  size: { type: String, default: 'default' },
  stripe: { type: Boolean, default: false },
  bordered: { type: Boolean, default: false },
  clickable: { type: Boolean, default: false },
  caption: { type: String, default: '' },
  emptyText: { type: String, default: '暂无数据' }
});
const emit = defineEmits(['select']);

const isCard = computed(() => props.mode === 'card');

const cols = computed(() =>
  (Array.isArray(props.columns) ? props.columns : []).map((c, i) =>
    c && typeof c === 'object' ? c : { title: String(c === undefined ? '' : c), key: i }
  )
);

const rootClass = computed(() => [
  'kole-m-table--' + (isCard.value ? 'card' : 'scroll'),
  props.size === 'compact' ? 'kole-m-table--compact' : '',
  props.stripe ? 'kole-m-table--stripe' : '',
  props.bordered ? 'kole-m-table--bordered' : '',
  props.clickable ? 'kole-m-table--clickable' : ''
].filter(Boolean));

function keyOf(col, ci) {
  return col && col.key !== undefined ? String(col.key) : String(ci);
}

function cellOf(row, col, ci) {
  if (Array.isArray(row)) return { text: row[ci] };
  if (row && typeof row === 'object') {
    const raw = row[col && col.key !== undefined ? col.key : ci];
    if (raw && typeof raw === 'object') return raw;
    return { text: raw };
  }
  return { text: '' };
}

function textOf(cell) {
  if (cell === null || cell === undefined) return '';
  return String(cell.text === undefined ? cell : cell.text);
}

function alignOf(col, cell) {
  if (cell && cell.number) return 'number';
  if (cell && cell.align) return cell.align;
  if (col && col.number) return 'number';
  if (col && col.align) return col.align;
  return 'start';
}

function headClass(col) {
  if (col && col.number) return 'kole-m-table__head-cell--number';
  if (col && col.align) return 'kole-m-table__head-cell--' + col.align;
  return '';
}

function cellClass(col, row, ci) {
  const cell = cellOf(row, col, ci);
  return [
    'kole-m-table__cell--' + alignOf(col, cell),
    cell && cell.ellipsis ? 'kole-m-table__cell--ellipsis' : ''
  ].filter(Boolean);
}

function onRowTap(ri, row) {
  if (row && row.disabled) return;
  emit('select', ri, row);
}
</script>

<style>
.kole-m-table {
  --kole-m-table-row-height: 88rpx;
  --kole-m-table-cell-padding: 24rpx;
  --kole-m-touch-target: 88rpx;
  --kole-m-font-size-body: 32rpx;
  --kole-m-font-size-label: 28rpx;
  --kole-m-gutter: 32rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  background-color: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-size: var(--kole-m-font-size-body);
}

/* 横向滚动视口：滚动只发生在这里 */
.kole-m-table__viewport {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}

.kole-m-table__inner {
  display: inline-block;
  min-width: 100%;
}

.kole-m-table__row {
  display: flex;
  align-items: stretch;
  min-height: var(--kole-m-table-row-height);
}

.kole-m-table__head-cell {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  flex-shrink: 0;
  padding: 24rpx var(--kole-m-table-cell-padding);
  background-color: var(--kole-color-table-header-bg);
  color: var(--kole-color-text-secondary);
  font-size: var(--kole-m-font-size-label);
  border-bottom: 1rpx solid var(--kole-color-border);
}

.kole-m-table__cell {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  flex-shrink: 0;
  padding: 24rpx var(--kole-m-table-cell-padding);
  background-color: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-size: var(--kole-m-font-size-body);
  border-bottom: 1rpx solid var(--kole-color-border);
}

.kole-m-table__row:last-child .kole-m-table__cell { border-bottom: 0; }

/* 变体 size=compact：行高不变（触控下限），只收紧字号 */
.kole-m-table--compact .kole-m-table__inner { font-size: var(--kole-m-font-size-label); }

/* 列对齐 */
.kole-m-table__cell--center,
.kole-m-table__head-cell--center { justify-content: center; }

.kole-m-table__cell--end,
.kole-m-table__head-cell--end { justify-content: flex-end; }

/* 数字列：等宽字 + 右对齐，方便按位对比 */
.kole-m-table__cell--number,
.kole-m-table__head-cell--number { justify-content: flex-end; }

/* 变体 bordered=true：单元格之间也画竖线 */
.kole-m-table--bordered .kole-m-table__head-cell + .kole-m-table__head-cell,
.kole-m-table--bordered .kole-m-table__cell + .kole-m-table__cell {
  border-left: 1rpx solid var(--kole-color-border);
}

/* 变体 stripe=true：偶数行浅底 */
.kole-m-table--stripe .kole-m-table__body .kole-m-table__row:nth-child(even) .kole-m-table__cell {
  background-color: var(--kole-color-table-header-bg);
}

/* 状态 selected：当前选中行 */
.kole-m-table__row.is-selected .kole-m-table__cell {
  background-color: var(--kole-color-brand-bg);
  color: var(--kole-color-brand);
}

/* 状态 disabled：置灰且不响应 */
.kole-m-table__row.is-disabled .kole-m-table__cell { color: var(--kole-color-text-disabled); }

/* 状态 empty：空态占位 */
.kole-m-table__empty {
  display: block;
  padding: 80rpx var(--kole-m-gutter);
  color: var(--kole-color-text-secondary);
  font-size: var(--kole-m-font-size-label);
  text-align: center;
  border-bottom: 1rpx solid var(--kole-color-border);
}

/* 变体 mode=card：每行摊成键值对，彻底不横向滚动 */
.kole-m-table--card .kole-m-table__viewport { white-space: normal; }

.kole-m-table--card .kole-m-table__inner {
  display: block;
  min-width: 0;
}

.kole-m-table--card .kole-m-table__head { display: none; }

.kole-m-table--card .kole-m-table__row {
  display: block;
  padding: 24rpx var(--kole-m-gutter);
  border-bottom: 1rpx solid var(--kole-color-border);
}

.kole-m-table--card .kole-m-table__cell {
  display: flex;
  justify-content: space-between;
  padding: 8rpx 0;
  border-bottom: 0;
}

.kole-m-table--card .kole-m-table__cell::before {
  content: attr(data-label);
  color: var(--kole-color-text-secondary);
  font-size: var(--kole-m-font-size-label);
}

/* 状态 clickable：整行是热区；行必须同时可聚焦（role="row" + tabindex 由宿主传入），
   否则点击成了唯一的交互路径（规格 §47.6）。cursor 只给表体行，表头不变手型。 */
.kole-m-table__body .kole-m-table__row:active .kole-m-table__cell {
  background-color: var(--kole-color-brand-bg);
}
</style>