72 lines
1.6 KiB
Vue
72 lines
1.6 KiB
Vue
<template>
|
|
|
|
<div class="My-Table">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th v-for="(c, i) in columns" :key="i">
|
|
<span @click="orderBy(c.orderBy)" v-if="c.orderBy">{{ c.heading }} V</span>
|
|
<span v-else>{{ c.heading }}</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody is="transition-group" name="list">
|
|
<tr v-for="(r, ri) in rows" :key="ri">
|
|
<td v-for="(c, ci) in columns" :key="ci + 'c'">
|
|
<span v-if="c.prop">{{ r[c.prop] }}</span>
|
|
<span v-else-if="c.render">{{ c.render(r) }}</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'My-Table',
|
|
props: {
|
|
columns: {
|
|
type: Array,
|
|
default() {
|
|
return [ ];
|
|
}
|
|
},
|
|
rows: {
|
|
type: Array,
|
|
default() {
|
|
return [ ];
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
methods: {
|
|
orderBy(col) {
|
|
console.log(col);
|
|
this.$emit('sort', {
|
|
orderBy: col,
|
|
orderDesc: false
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.list-item {
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
}
|
|
.list-enter-active, .list-leave-active {
|
|
transition: all 1s;
|
|
}
|
|
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
</style>
|