62 lines
872 B
Vue
62 lines
872 B
Vue
<template>
|
|
<div
|
|
ref="view"
|
|
class="table_view"
|
|
>
|
|
<table>
|
|
<tr
|
|
v-for="(item,key) of items"
|
|
:key="key"
|
|
>
|
|
<td
|
|
v-for="(col,c_key) of columns"
|
|
:key="c_key"
|
|
v-text="resolve_data(item,col)"
|
|
/>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { resolve_data } from '../helper';
|
|
|
|
export default {
|
|
props: {
|
|
items: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
columns: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
},
|
|
methods: { resolve_data }
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.table_view {
|
|
overflow: auto;
|
|
border: 1px solid blue;
|
|
width: max-content;
|
|
max-width: 100%;
|
|
max-height: 100vh;
|
|
font-size: 12px;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
tr:nth-child(odd) {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
td {
|
|
border: 1px solid black;
|
|
margin: 0;
|
|
}
|
|
</style>
|