aurora-admin/frameworks/TreeTable.vue3.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" :indeterminate.prop="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 setup>
import { computed, reactive } from 'vue';

const props = defineProps({
  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: '合计' }) }
});
const emit = defineEmits(['update:selectedKeys', 'row-click']);

const state = reactive({
  expanded: new Set(props.defaultExpandedKeys),
  selected: new Set(props.selectedKeys)
});

const hasChildren = (n) => !!(n.children && n.children.length);
function leafSum(node, key) {
  if (!hasChildren(node)) return Number(node[key]) || 0;
  return node.children.reduce((s, c) => s + leafSum(c, key), 0);
}
function leafKeys() {
  const out = [];
  const walk = (nodes) => nodes.forEach(n => { if (hasChildren(n)) walk(n.children); else out.push(n[props.rowKey]); });
  walk(props.data);
  return out;
}
function descendantKeys(node) { let o = []; (node.children || []).forEach(c => { o.push(c[props.rowKey]); o = o.concat(descendantKeys(c)); }); return o; }
function allChildrenSelected(node) { if (!hasChildren(node)) return state.selected.has(node[props.rowKey]); return node.children.every(c => allChildrenSelected(c)); }

const showSummary = computed(() => !!props.summaryColumn);
const visibleList = computed(() => {
  const out = [];
  const walk = (nodes, depth) => nodes.forEach(n => {
    out.push({ node: n, depth });
    if (hasChildren(n) && state.expanded.has(n[props.rowKey])) walk(n.children, depth + 1);
  });
  walk(props.data, 0);
  return out;
});
const allSelected = computed(() => props.data.length > 0 && leafKeys().every(k => state.selected.has(k)));
const someSelected = computed(() => { const l = leafKeys(); const n = l.filter(k => state.selected.has(k)).length; return n > 0 && n < l.length; });

function isExpanded(k) { return state.expanded.has(k); }
function isSelected(k) { return state.selected.has(k); }
function totalOf(key) { return props.data.reduce((s, n) => s + leafSum(n, key), 0); }
function cellValue(node, key) {
  if (hasChildren(node) && key === props.summaryColumn) return leafSum(node, key);
  return node[key];
}
function toggleExpand(key) { state.expanded.has(key) ? state.expanded.delete(key) : state.expanded.add(key); state.expanded = new Set(state.expanded); }
function onRowClick(node) { state.selected = new Set([node[props.rowKey]]); emit('update:selectedKeys', [node[props.rowKey]]); emit('row-click', node); }
function toggleCheck(node) {
  const key = node[props.rowKey];
  const willCheck = !state.selected.has(key);
  const keys = [key, ...descendantKeys(node)];
  keys.forEach(k => willCheck ? state.selected.add(k) : state.selected.delete(k));
  const propagate = (nodes) => nodes.forEach(n => {
    if (hasChildren(n)) { allChildrenSelected(n) ? state.selected.add(n[props.rowKey]) : state.selected.delete(n[props.rowKey]); propagate(n.children); }
  });
  propagate(props.data);
  state.selected = new Set(state.selected);
  emit('update:selectedKeys', [...state.selected]);
}
function toggleAll() {
  const next = allSelected.value ? [] : leafKeys();
  state.selected = new Set(next);
  emit('update:selectedKeys', next);
}
</script>

<!-- 样式对齐 组件7.txt TreeTable 规范 -->
<style scoped>
.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>