aurora-admin/frameworks/TreeTable.vue2.vue

<template>
  <div class="kole-tt">
    <table>
      <thead>
        <tr>
          <th v-if="selectable" class="col-selection" style="width:48px">
            <input type="checkbox" class="tt-check" :checked="allSelected" v-indeterminate="someSelected" @change="toggleAll">
          </th>
          <th
            v-for="col in columns" :key="col.key"
            :class="{ 'align-right': col.align === 'right' }"
          >{{ col.title }}</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="row in visibleList" :key="row.node[rowKey]"
          :class="{ 'is-selected': isSelected(row.node[rowKey]) }"
          @click="onRowClick(row.node)"
        >
          <td v-if="selectable" class="col-selection">
            <input type="checkbox" class="tt-check" :checked="isSelected(row.node[rowKey])" @click.stop="toggleCheck(row.node)">
          </td>
          <td
            v-for="col in columns" :key="col.key"
            :class="{ 'align-right': col.align === 'right' }"
          >
            <div v-if="col.key === columns[0].key" class="tree-cell" :style="{ paddingLeft: row.depth * 16 + 'px' }">
              <span
                v-if="hasChildren(row.node)"
                class="tt-arrow" :class="{ 'is-open': isExpanded(row.node[rowKey]) }"
                @click.stop="toggleExpand(row.node[rowKey])"
              >▸</span>
              <span v-else class="tt-arrow-placeholder"></span>
              <span>{{ row.node[col.key] }}</span>
              <span v-if="hasChildren(row.node) && summaryColumn" class="tt-summary">(汇总)</span>
            </div>
            <template v-else>
              {{ cellValue(row.node, col.key) }}
            </template>
          </td>
        </tr>
      </tbody>
      <tfoot v-if="showSummary">
        <tr>
          <td v-if="selectable"></td>
          <td>{{ summary.label || '合计' }}</td>
          <td v-for="col in columns.slice(1)" :key="col.key" :class="{ 'align-right': col.align === 'right' }">
            {{ col.key === summaryColumn ? totalOf(col.key) : '' }}
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
export default {
  name: 'KoleTreeTable',
  directives: { indeterminate(el, b) { el.indeterminate = !!b.value; } },
  props: {
    columns: { type: Array, required: true },   // [{ key, title, align }]
    data: { type: Array, required: true },       // 树形行 [{ key, children, ... }]
    rowKey: { type: String, default: 'key' },
    selectable: { type: Boolean, default: false },
    selectedKeys: { type: Array, default: () => [] },
    defaultExpandedKeys: { type: Array, default: () => [] },
    summaryColumn: { type: String, default: '' },   // 对该数值列按叶子求和并在父级显示
    summary: { type: Object, default: () => ({ label: '合计' }) }
  },
  data() {
    return {
      expanded: new Set(this.defaultExpandedKeys),
      selected: new Set(this.selectedKeys)
    };
  },
  computed: {
    showSummary() { return !!this.summaryColumn; },
    visibleList() {
      const out = [];
      const walk = (nodes, depth) => {
        nodes.forEach(n => {
          out.push({ node: n, depth });
          if (this.hasChildren(n) && this.expanded.has(n[this.rowKey])) walk(n.children, depth + 1);
        });
      };
      walk(this.data, 0);
      return out;
    },
    allSelected() { return this.data.length > 0 && this.leafKeys().every(k => this.selected.has(k)); },
    someSelected() {
      const leaves = this.leafKeys();
      const n = leaves.filter(k => this.selected.has(k)).length;
      return n > 0 && n < leaves.length;
    }
  },
  methods: {
    hasChildren(n) { return n.children && n.children.length; },
    leafSum(node, key) {
      if (!this.hasChildren(node)) return Number(node[key]) || 0;
      return node.children.reduce((s, c) => s + this.leafSum(c, key), 0);
    },
    leafKeys() {
      const out = [];
      const walk = (nodes) => nodes.forEach(n => {
        if (this.hasChildren(n)) walk(n.children); else out.push(n[this.rowKey]);
      });
      walk(this.data);
      return out;
    },
    totalOf(key) { return this.data.reduce((s, n) => s + this.leafSum(n, key), 0); },
    isExpanded(k) { return this.expanded.has(k); },
    isSelected(k) { return this.selected.has(k); },
    cellValue(node, key) {
      if (this.hasChildren(node) && key === this.summaryColumn) return this.leafSum(node, key);
      return node[key];
    },
    toggleExpand(key) { this.expanded.has(key) ? this.expanded.delete(key) : this.expanded.add(key); this.expanded = new Set(this.expanded); },
    onRowClick(node) { this.selected = new Set([node[this.rowKey]]); this.$emit('update:selectedKeys', [node[this.rowKey]]); this.$emit('row-click', node); },
    descendantKeys(node) { let o = []; (node.children || []).forEach(c => { o.push(c[this.rowKey]); o = o.concat(this.descendantKeys(c)); }); return o; },
    allChildrenSelected(node) { if (!this.hasChildren(node)) return this.selected.has(node[this.rowKey]); return node.children.every(c => this.allChildrenSelected(c)); },
    toggleCheck(node) {
      const key = node[this.rowKey];
      const willCheck = !this.selected.has(key);
      const keys = [key, ...this.descendantKeys(node)];
      keys.forEach(k => willCheck ? this.selected.add(k) : this.selected.delete(k));
      const propagate = (nodes) => nodes.forEach(n => {
        if (this.hasChildren(n)) { this.allChildrenSelected(n) ? this.selected.add(n[this.rowKey]) : this.selected.delete(n[this.rowKey]); propagate(n.children); }
      });
      propagate(this.data);
      this.selected = new Set(this.selected);
      this.$emit('update:selectedKeys', [...this.selected]);
    },
    toggleAll() {
      const next = this.allSelected ? [] : this.leafKeys();
      this.selected = new Set(next);
      this.$emit('update:selectedKeys', next);
    }
  }
};
</script>

<!-- 样式对齐 组件7.txt TreeTable 规范 -->
<style>
.kole-tt { width: 100%; border: 1px solid #E8ECF1; border-radius: 8px; overflow: hidden; background: #fff; }
.kole-tt table { width: 100%; border-collapse: collapse; font-size: 14px; color: #262626; }
.kole-tt 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-tt tbody td { height: 48px; padding: 0 16px; border-bottom: 1px solid #E8ECF1; text-align: left; }
.kole-tt tbody tr:last-child td { border-bottom: none; }
.kole-tt tbody tr:hover { background: #F5F7FA; }
.kole-tt tbody tr.is-selected { background: #F0F5FF; }
.kole-tt .align-right { text-align: right; }
.kole-tt .col-selection { text-align: center; }
.kole-tt .tree-cell { display: flex; align-items: center; gap: 4px; }
.kole-tt .tt-arrow { width: 16px; height: 16px; font-size: 12px; color: #6E6E6E; transition: transform .15s; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kole-tt .tt-arrow.is-open { transform: rotate(90deg); }
.kole-tt .tt-arrow-placeholder { width: 16px; flex-shrink: 0; }
.kole-tt .tt-check { width: 14px; height: 14px; cursor: pointer; }
.kole-tt .tt-summary { color: #6E6E6E; font-size: 12px; margin-left: 6px; }
.kole-tt tfoot td { height: 44px; padding: 0 16px; background: #FAFAFA; font-weight: 600; border-top: 1px solid #E8ECF1; }
</style>