Я новичок в vuejs и использую в своем проекте две библиотеки, которые являются element-ui и vuetify. Поэтому я добавляю в свой шаблон компонентную таблицу element-UI, которая в большей степени состоит из компонента vuetify, и после его интеграции страница больше не появляется без какой-либо отображаемой ошибки. Я не знаю, почему у меня такой результат, но я попробовал v-flex и шаблон, но проблема не решена.
<template>
<div style="background-color:#E0E0E0">
<router-view></router-view>
<v-app-bar
color="teal darken-3"
dark
class="navbar"
style="position:fixed; top:0; z-index:10"
>
<v-layout row>
<v-flex sm="6">
<img src="../assets/logoBni.jpg" style="width:50px; height:50px"/>
</v-flex>
</v-layout>
<v-spacer></v-spacer>
<v-flex xs="12"><p class="text-justify" style="margin-right:250px">UTILISATEUR</p></v-flex>
<div class="my-2">
<v-btn small v-on:click="allerLogin" width="150px">Se deconnecter</v-btn>
</div>
</v-app-bar>
<v-row style="margin-right:1100px;margin-top:100px;position:fixed; top:0; z-index:10" class="navbar">
<v-col cols="12" sm="6" offset-sm="3">
<v-card height="330px" width="350px">
<v-card-title class="orange darken-3">
<span class="headline">Menu</span>
<v-spacer></v-spacer>
<v-menu bottom left>
<v-list>
<v-list-item
v-for="(item, i) in items"
:key="i"
@click=""
>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-card-title>
<v-card-text>
<v-row>
<div class="my-2">
<v-btn small v-on:click="allerAccueil" width="150px">Accueil</v-btn>
</div>
</v-row>
<v-row>
<div class="my-2">
<v-btn small v-on:click="allerClient" width="150px">Client</v-btn>
</div>
</v-row>
<v-row>
<div class="my-2">
<v-btn small v-on:click="allerOperation" width="150px">Operation</v-btn>
</div>
</v-row>
<v-row>
<div class="my-2">
<v-btn small v-on:click="allerBilletage" width="150px">Billetage</v-btn>
</div>
</v-row>
<v-row>
<div class="my-2">
<v-btn small v-on:click="allerCaisse" width="150px">Caisse</v-btn>
</div>
</v-row>
<v-row>
<div class="my-2">
<v-btn small v-on:click="allerDroits" width="150px">Gestion des droits</v-btn>
</div>
</v-row>
</v-card-text>
</v-card>
</v-col>
</v-row>
<div>
<v-card
class="mx-auto"
height="1000"
max-width="900"
outlined
color="orange lighten-5"
style="border-style:solid"
>
<div style="margin-top:100px; margin-left:50px; margin-right:50px">
<!--Modal Formulaire de creation d'utilisateur-->
<v-row justify="center">
<v-dialog v-model="dialog" persistent max-width="600px">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark v-on="on" style="margin-bottom:30px; margin-left:500px;">Ajouter un utilisateur
<v-icon>account-add-outline</v-icon>
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">Création d'un utilisateur</span>
</v-card-title>
<v-card-text>
<v-container>
<v-combobox
v-model="model"
:items="items"
:search-input.sync="searchCombo"
:hide-selected="hideSelected"
label="Choisir un utilisateur"
:multiple="multiple"
persistent-hint
:small-chips="chips"
:clearable="clearable"
>
</v-combobox>
<div style="border-style:solid">
<v-row style="margin-left:200px">
<v-col
cols="12"
md="8"
>
<v-text-field
v-model="firstname"
:rules="nameRules"
label="Nom *"
required
></v-text-field>
</v-col>
</v-row>
<v-row style="margin-left:200px">
<v-col
cols="12"
md="8"
>
<v-text-field
v-model="firstname"
:rules="nameRules"
label="Prenoms *"
required
></v-text-field>
</v-col>
</v-row>
<v-row style="margin-left:200px">
<v-col
cols="12"
md="8"
>
<v-text-field
v-model="firstname"
:rules="nameRules"
label="Code exploitant *"
required
></v-text-field>
</v-col>
</v-row>
<v-row style="margin-left:200px">
<v-col
cols="12"
md="8"
>
<v-text-field
v-model="firstname"
:rules="nameRules"
label="Matricule *"
required
></v-text-field>
</v-col>
</v-row>
</div>
</v-container>
<small>*indique les champs obligatoire</small>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="dialog = false">Annuler</v-btn>
<v-btn color="blue darken-1" text @click="dialog = false">Enregistrer</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
<!-- Formulaire de creation d'utilisateur-->
<!-- add code that prevents the page from displaying -->
<el-table
:data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
style="width: 100%">
<el-table-column
label="Date"
prop="date">
</el-table-column>
<el-table-column
label="Name"
prop="name">
</el-table-column>
<el-table-column
align="right">
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="mini"
placeholder="Type to search"/>
</template>
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">Editer</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">Supprimer</el-button>
</template>
</el-table-column>
</el-table>
<!-- add code that prevents the page from displaying -->
</div>
</v-card>
</div>
</div>
</template>