You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
756 B
38 lines
756 B
6 years ago
|
<template>
|
||
|
<table class="table">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<slot name="columns">
|
||
|
<th v-for="column in columns">{{column}}</th>
|
||
|
</slot>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr v-for="item in data">
|
||
|
<slot :row="item">
|
||
|
<td v-for="column in columns" v-if="hasValue(item, column)">{{itemValue(item, column)}}</td>
|
||
|
</slot>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</template>
|
||
|
<script>
|
||
|
export default {
|
||
|
name: 'l-table',
|
||
|
props: {
|
||
|
columns: Array,
|
||
|
data: Array
|
||
|
},
|
||
|
methods: {
|
||
|
hasValue (item, column) {
|
||
|
return item[column.toLowerCase()] !== 'undefined'
|
||
|
},
|
||
|
itemValue (item, column) {
|
||
|
return item[column.toLowerCase()]
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
<style>
|
||
|
</style>
|