146 lines
6.8 KiB
Vue
146 lines
6.8 KiB
Vue
<template>
|
|
<div class="aa-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>
|
|
.aa-tt { width: 100%; border: 1px solid #E8ECF1; border-radius: 8px; overflow: hidden; background: #fff; }
|
|
.aa-tt table { width: 100%; border-collapse: collapse; font-size: 14px; color: #262626; }
|
|
.aa-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; }
|
|
.aa-tt tbody td { height: 48px; padding: 0 16px; border-bottom: 1px solid #E8ECF1; text-align: left; }
|
|
.aa-tt tbody tr:last-child td { border-bottom: none; }
|
|
.aa-tt tbody tr:hover { background: #F5F7FA; }
|
|
.aa-tt tbody tr.is-selected { background: #F0F5FF; }
|
|
.aa-tt .align-right { text-align: right; }
|
|
.aa-tt .col-selection { text-align: center; }
|
|
.aa-tt .tree-cell { display: flex; align-items: center; gap: 4px; }
|
|
.aa-tt .tt-arrow { width: 16px; height: 16px; font-size: 12px; color: #8C8C8C; transition: transform .15s; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
.aa-tt .tt-arrow.is-open { transform: rotate(90deg); }
|
|
.aa-tt .tt-arrow-placeholder { width: 16px; flex-shrink: 0; }
|
|
.aa-tt .tt-check { width: 14px; height: 14px; cursor: pointer; }
|
|
.aa-tt .tt-summary { color: #8C8C8C; font-size: 12px; margin-left: 6px; }
|
|
.aa-tt tfoot td { height: 44px; padding: 0 16px; background: #FAFAFA; font-weight: 600; border-top: 1px solid #E8ECF1; }
|
|
</style>
|