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

<template>
  <div class="kole-m-table" :class="rootClass" :data-mode="isCard ? 'card' : 'scroll'">
    <div class="kole-m-table__viewport">
      <table class="kole-m-table__inner">
        <caption v-if="caption" class="kole-m-table__caption">{{ caption }}</caption>
        <thead class="kole-m-table__head">
          <tr class="kole-m-table__row">
            <th
              v-for="(col, ci) in cols"
              :key="keyOf(col, ci)"
              class="kole-m-table__head-cell"
              :class="headClass(col)"
              scope="col"
            >{{ col && col.title !== undefined ? col.title : '' }}</th>
          </tr>
        </thead>
        <tbody v-if="rows.length" class="kole-m-table__body">
          <tr
            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') : null"
            :aria-disabled="row && row.disabled ? 'true' : null"
            :tabindex="clickable && !(row && row.disabled) ? 0 : null"
            @click="onRowClick(ri, row)"
            @keydown="onRowKey(ri, row, $event)"
          >
            <td
              v-for="(col, ci) in cols"
              :key="keyOf(col, ci) + '-' + ri"
              class="kole-m-table__cell"
              :class="cellClass(col, row, ci)"
              :data-label="col && col.title !== undefined ? String(col.title) : ''"
              :title="titleOf(row, col, ci)"
            >{{ textOf(cellOf(row, col, ci)) }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <p v-if="!rows.length" class="kole-m-table__empty" role="status" aria-live="polite">{{ emptyText }}</p>
    <slot></slot>
  </div>
</template>

<script>
/* 表格（移动端）— 规格 §47。
   结构：table（根）> viewport（横向滚动视口）> inner（原生 table）+ empty（空态）。
   **横向滚动只发生在 viewport 上**（overflow-x: auto），页面整体不横向溢出（规格 §47.1）；
   根与视口都写 min-width: 0，否则内部 min-width 会把父级顶宽。
   表头 sticky（不是 fixed：fixed 会脱出滚动容器，横向滚动时表头不跟随）。
   mode=card 把小屏行摊成键值对，彻底不需要横向滚动。
   rows 为二维数组或对象数组；单元格支持 { text, align, ellipsis, number, title }。 */

export default {
  name: 'KoleMTable',
  props: {
    columns: { type: Array, default: function () { return []; } },
    rows: { type: Array, default: function () { return []; } },
    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: '暂无数据' }
  },
  computed: {
    isCard: function () {
      return this.mode === 'card';
    },
    cols: function () {
      return (Array.isArray(this.columns) ? this.columns : []).map(function (c, i) {
        return c && typeof c === 'object' ? c : { title: String(c === undefined ? '' : c), key: i };
      });
    },
    rootClass: function () {
      return [
        'kole-m-table--' + (this.isCard ? 'card' : 'scroll'),
        this.size === 'compact' ? 'kole-m-table--compact' : '',
        this.stripe ? 'kole-m-table--stripe' : '',
        this.bordered ? 'kole-m-table--bordered' : '',
        this.clickable ? 'kole-m-table--clickable' : ''
      ].filter(Boolean);
    }
  },
  methods: {
    keyOf: function (col, ci) {
      return col && col.key !== undefined ? String(col.key) : String(ci);
    },
    cellOf: function (row, col, ci) {
      if (Array.isArray(row)) return { text: row[ci] };
      if (row && typeof row === 'object') {
        var raw = row[col && col.key !== undefined ? col.key : ci];
        if (raw && typeof raw === 'object') return raw;
        return { text: raw };
      }
      return { text: '' };
    },
    textOf: function (cell) {
      if (cell === null || cell === undefined) return '';
      return String(cell.text === undefined ? cell : cell.text);
    },
    titleOf: function (row, col, ci) {
      var cell = this.cellOf(row, col, ci);
      return cell && cell.title ? String(cell.title) : null;
    },
    alignOf: function (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';
    },
    headClass: function (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 '';
    },
    cellClass: function (col, row, ci) {
      var cell = this.cellOf(row, col, ci);
      return [
        'kole-m-table__cell--' + this.alignOf(col, cell),
        cell && cell.ellipsis ? 'kole-m-table__cell--ellipsis' : ''
      ].filter(Boolean);
    },
    onRowClick: function (ri, row) {
      if (row && row.disabled) return;
      this.$emit('select', ri, row);
    },
    /* 键盘路径：聚焦后按回车 / 空格选中该行（整行点击不能是唯一的交互路径，规格 §47.6） */
    onRowKey: function (ri, row, e) {
      if (!this.clickable || (row && row.disabled)) return;
      if (e.key !== 'Enter' && e.key !== ' ' && e.key !== 'Spacebar') return;
      e.preventDefault();
      this.$emit('select', ri, row);
    }
  }
};
</script>

<style src="./Table.css"></style>