#javascript #vue.js #datatable #vuetify.js
#javascript #vue.js #datatable #vuetify.js
Вопрос:
Я использую vuetify, и у меня есть четыре таблицы данных. Я хочу разместить две таблицы данных рядом с небольшим пробелом между ними. Я использую перенос строк v-flex и v-layout и помещаю все таблицы между ними. Но я получаю желаемый результат. Первые две таблицы расположены вверх и вниз, а две другие в порядке, но между ними нет пробела. Как я должен это исправить?
<template>
<div>
<v-toolbar card prominent color="primary" dark>
<v-toolbar-title>Add Countries</v-toolbar-title>
</v-toolbar>
<v-form>
<v-container>
<v-layout row wrap>
<v-flex xs12 sm6>
<v-text-field
label="Country Name"
single-line
solo
></v-text-field>
</v-flex>
<v-flex xs12 sm6>
<v-text-field
label="Currency Code"
single-line
solo
></v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-form>
<!-- Region -->
<v-layout row wrap>
<v-flex xs6>
<v-toolbar flat color="white">
<v-toolbar-title>Region</v-toolbar-title>
<v-spacer></v-spacer>
<v-dialog v-model="dialog" max-width="500px">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark class="mb-2" v-on="on">Add</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-container grid-list-md>
<v-layout wrap>
<v-flex >
<v-text-field v-model="editedItem.region" label="Region"></v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" flat @click="close">Cancel</v-btn>
<v-btn color="blue darken-1" flat @click="save">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
<v-data-table
:headers="headers"
:items="regions"
class="elevation-1"
>
<template v-slot:items="props">
<td>{{ props.item.region }}</td>
<td class="justify-right layout px-10">
<v-icon
small
class="mr-2"
@click="editItem(props.item)"
>
edit
</v-icon>
<v-icon
small
@click="deleteItem(props.item)"
>
delete
</v-icon>
</td>
</template>
<!-- <template slot="no-data">
<center>
<h3 id="regionAlert">Add Regions</h3>
</center>
</template> -->
</v-data-table>
</v-flex>
<!-- Income Groups -->
<v-flex xs6>
<v-toolbar flat color="white" class="mt-5">
<v-toolbar-title>Income Groups</v-toolbar-title>
<v-spacer></v-spacer>
<v-dialog v-model="dialog" max-width="500px">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark class="mb-2" v-on="on">Add</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-container grid-list-md>
<v-layout wrap>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.income" label="Income Groups"></v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<!-- <v-btn color="blue darken-1" flat @click="close1">Cancel</v-btn>
<v-btn color="blue darken-1" flat @click="save1">Save</v-btn> -->
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
<v-data-table
:headers="headers"
:items="income"
class="elevation-1"
>
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
<td class="justify-center layout px-0">
<v-icon
small
class="mr-2"
@click="editItem(props.item)"
>
edit
</v-icon>
<v-icon
small
@click="deleteItem(props.item)"
>
delete
</v-icon>
</td>
</template>
</v-data-table>
</v-flex>
<!-- Races -->
<v-flex xs6>
<v-toolbar flat color="white" class="mt-5">
<v-toolbar-title>Race</v-toolbar-title>
<v-spacer></v-spacer>
<v-dialog v-model="dialog" max-width="500px">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark class="mb-2" v-on="on">Add</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-container grid-list-md>
<v-layout wrap>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.race" label="Race"></v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<!-- <v-btn color="blue darken-1" flat @click="close1">Cancel</v-btn>
<v-btn color="blue darken-1" flat @click="save1">Save</v-btn> -->
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
<v-data-table
:headers="headers"
:items="race"
class="elevation-1"
>
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
<td class="justify-center layout px-0">
<v-icon
small
class="mr-2"
@click="editItem(props.item)"
>
edit
</v-icon>
<v-icon
small
@click="deleteItem(props.item)"
>
delete
</v-icon>
</td>
</template>
</v-data-table>
</v-flex>
<v-divider></v-divider>
<!-- Age Groups -->
<v-flex xs6>
<v-toolbar flat color="white" class="mt-5">
<v-toolbar-title>Age Groups</v-toolbar-title>
<v-spacer></v-spacer>
<v-dialog v-model="dialog" max-width="500px">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark class="mb-2" v-on="on">Add</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-container grid-list-md>
<v-layout wrap>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.age" label="Age Group"></v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<!-- <v-btn color="blue darken-1" flat @click="close1">Cancel</v-btn>
<v-btn color="blue darken-1" flat @click="save1">Save</v-btn> -->
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
<v-data-table
:headers="headers"
:items="age"
class="elevation-1"
>
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
<td class="justify-center layout px-0">
<v-icon
small
class="mr-2"
@click="editItem(props.item)"
>
edit
</v-icon>
<v-icon
small
@click="deleteItem(props.item)"
>
delete
</v-icon>
</td>
</template>
</v-data-table>
</v-flex>
</v-layout>
</div>
</template>
<script>
export default {
data (){
return {
dialog: false,
headers: [
{
text: 'Name',
align: 'left',
sortable: false,
value: 'name'
},
{ text: 'Actions', value: 'name', sortable: false }
],
regions: [],
income: [],
race: [],
age: [],
editedIndex: -1,
editedItem: {
name: '',
},
defaultItem: {
name: '',
}
};
},
computed: {
formTitle () {
return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
}
},
watch: {
dialog (val) {
val || this.close()
}
},
created () {
this.initialize()
},
methods: {
initialize () {
this.regions = [
{
region: 'Frozen Yogurt',
},
]
this.race = [
{
name: 'Frozen Yogurt',
},
{
name: 'KitKat',
}
]
this.income = [
{
name: 'Frozen Yogurt',
},
{
name: 'KitKat',
}
]
this.age = [
{
name: 'Frozen Yogurt',
},
{
name: 'KitKat',
}
]
},
editItem (item) {
this.editedIndex = this.desserts.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialog = true
},
deleteItem (item) {
const index = this.regions.indexOf(item)
confirm('Are you sure you want to delete this item?') amp;amp; this.regions.splice(index, 1)
},
close () {
this.dialog = false
setTimeout(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
}, 300)
},
save () {
if (this.editedIndex > -1) {
Object.assign(this.regions[this.editedIndex], this.editedItem)
} else {
this.regions.push(this.editedItem)
}
this.close()
}
}
}
</script>
<style scoped>
#regionAlert
{
font-weight: 400;
font-size: 13px;
}
</style>[![enter image description here][1]][1] Комментарии:
1. Можете ли вы сгенерировать то же самое в jsFiddle?
2. Я добавлял верхнюю часть поля ко второй таблице, что вызывало эту проблему