Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready
This commit is contained in:
@@ -0,0 +1,49 @@
|
||||
<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">
|
||||
<tr class="aa-row" :key="row[idKey]">
|
||||
<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" :key="row[idKey] + '-exp'">
|
||||
<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>
|
||||
export default {
|
||||
name: 'AaExpandableTable',
|
||||
props: {
|
||||
data: { type: Array, default: () => [] },
|
||||
columns: { type: Array, default: () => [] },
|
||||
idKey: { type: String, default: 'id' }
|
||||
},
|
||||
data() {
|
||||
return { openSet: {} };
|
||||
},
|
||||
methods: {
|
||||
toggle(id) {
|
||||
this.$set(this.openSet, id, !this.openSet[id]);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style src="./ExpandableTable.css"></style>
|
||||
Reference in New Issue
Block a user