46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<template>
|
||
<table class="aa-exptable">
|
||
<thead>
|
||
<tr><th style="width:40px"></th><th v-for="c in columns" :key="c.key">{{ c.title }}</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<template v-for="row in data" :key="row[idKey]">
|
||
<tr class="aa-row">
|
||
<td>
|
||
<button class="aa-exp-toggle" :class="{ 'is-open': openSet[row[idKey]] }" @click="toggle(row[idKey])">▶</button>
|
||
</td>
|
||
<td v-for="c in columns" :key="c.key">{{ row[c.key] }}</td>
|
||
</tr>
|
||
<tr v-if="openSet[row[idKey]]" class="aa-exp-row">
|
||
<td></td>
|
||
<td :colspan="columns.length">
|
||
<div class="aa-exp-panel">
|
||
<div>备注：{{ row.detail.note }}</div>
|
||
<div class="aa-exp-sub">
|
||
<div v-for="(it, i) in row.detail.items" :key="i">· {{ it }}</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</template>
|
||
</tbody>
|
||
</table>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive } from 'vue';
|
||
|
||
const props = defineProps({
|
||
data: { type: Array, default: () => [] },
|
||
columns: { type: Array, default: () => [] },
|
||
idKey: { type: String, default: 'id' }
|
||
});
|
||
|
||
const openSet = reactive({});
|
||
function toggle(id) {
|
||
openSet[id] = !openSet[id];
|
||
}
|
||
</script>
|
||
|
||
<style src="./ExpandableTable.css"></style>
|