aurora-admin/frameworks/ExpandableTable.vue3.vue

<template>
  <table class="kole-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="kole-row">
          <td>
            <button class="kole-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="kole-exp-row">
          <td></td>
          <td :colspan="columns.length">
            <div class="kole-exp-panel">
              <div>备注：{{ row.detail.note }}</div>
              <div class="kole-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>