I have a table as a component that loads on some pages. In the table there is a button to create goals. But as I use this table on different pages, there are pages that I don't want this add goals button to be loaded, but on other pages this button will be loaded. Below I'm putting the table component and a page that I wouldn't want to load that button on it.
employeePage
<template>
<v-card height="900" width="1800">
<div >
<MetasTableComponent
:title="'Global Goal'"
:headers="headers"
:items="globalGoals"
:loading="loadingGobalGoals"
/>
<MetasTableComponent
:title="'Sectorial Goals'"
:headers="headers"
:items="sectorialGoals"
:loading="loadingMetasSetoriais"
/>
<MetasTableComponent
:title="'Individual Goals'"
:headers="headers"
:items="individualGoals"
:loading="loadingMetasIndividuais"
@save-data="createIndividualGoal"
/>
</div>
</v-card>
</template>
<script>
import {
findGlobalGoals,
findSectorialGoals,
findIndividualGoals,
createIndividualGoal,
} from "...";
import MetasTableComponent from "...";
export default {
name: "IndividualViewPage",
components: {
MetasTableComponent,
},
data: function () {
return {
drawer: false,
group: null,
headers: [
{
text: "Name",
value: "GoalName",
align: "left",
width: 50,
caption: "title",
},
{
text: "Min",
value: "Min",
align: "left",
width: 50,
caption: "title",
},
{
text: "Target",
value: "Target",
align: "left",
width: 50,
caption: "title",
},
{
text: "Max",
value: "Max",
align: "left",
width: 50,
caption: "title",
},
{
text: "Result",
value: "Result",
align: "left",
width: 50,
caption: "title",
},
{
text: "Actions",
value: "actions",
align: "left",
width: 40,
caption: "title",
},
],
globalGoals: [],
sectorialGoals: [],
individualGoals: [],
loadGlobalGoals: false,
loadSectorialGoals: false,
loadingIndividualGoals: false,
};
},
methods: {
async createIndividualGoal(data) {
[...]
},
async loadGlobalGoals() {
[...]
},
async loadSectorialGoals() {
[...]
},
async loadIndividualGoals() {
[...]
},
},
mounted() {
this.loadGlobalGoals();
this.loadSectorialGoals();
this.loadIndividualGoals();
},
};
</script>
Table component
<template>
<div id="table">
<v-card >
<v-app-bar dark color="green">
<v-toolbar-title>{{ title }}</v-toolbar-title>
</v-app-bar>
<v-data-table
dense
:headers="headers"
:items="items"
item-key="name"
:loading="loading"
loading-text="Loading..."
no-data-text="No record found."
:items-per-page="20"
:footer-props="{
itemsPerPageText: 'Items por page',
itemsPerPageAllText: 'All',
}"
>
<template v-slot:top>
<v-toolbar flat color="white">
<v-row dense>
<v-col cols="1">
<v-btn
fab
x-small
dark
color="green"
@click="createData()" //This is the button that add goal
>
<v-icon dark>mdi-plus</v-icon>
</v-btn>
</v-col>
</v-row>
</v-toolbar>
</template>
<template v-slot:[`item.actions`]="{ item }">
<v-tooltip right>
<template v-slot:activator="{ on, attrs }">
<v-icon
small
@click="readData(item)"
v-bind="attrs"
v-on="on"
>mdi-eye</v-icon
>
</template>
<span>View</span>
</v-tooltip>
<v-tooltip right>
<template v-slot:activator="{ on, attrs }">
<v-icon
small
@click="updateData(item)"
v-bind="attrs"
v-on="on"
>mdi-pencil</v-icon
>
</template>
<span>Editar</span>
</v-tooltip>
<v-tooltip right>
<template v-slot:activator="{ on, attrs }">
<v-icon
small
@click="deleteData(item)"
v-bind="attrs"
v-on="on"
>mdi-delete</v-icon
>
</template>
<span>Delete</span>
</v-tooltip>
</template>
</v-data-table>
</v-card>
<v-dialog v-model="formDialog">
<v-card ref="form">
<v-card-title >
{{ formDialogTitle }}
</v-card-title>
<v-card-text>
<v-row dense >
<v-col cols="4">
<v-text-field
v-model="itemData.GoalName"
label="Name"
dense
counter="150"
maxlength="150"
:readonly="isReading"
></v-text-field>
</v-col>
<v-col cols="2">
<v-text-field
v-model="itemData.Min"
label="Min"
dense
counter="150"
maxlength="150"
:readonly="isReading"
></v-text-field>
</v-col>
<v-col cols="2">
<v-text-field
v-model="itemData.Max"
label="Max"
dense
counter="150"
maxlength="150"
:readonly="isReading"
></v-text-field>
</v-col>
<v-col cols="2">
<v-text-field
v-model="itemData.Target"
label="Target"
dense
counter="150"
maxlength="150"
:readonly="isReading"
></v-text-field>
</v-col>
<v-col cols="2">
<v-text-field
v-model="itemData.Result"
label="Result"
dense
counter="150"
maxlength="150"
:readonly="isReading"
></v-text-field>
</v-col>
</v-row>
</v-card-text>
<v-card-actions>
<v-btn color="red" dark small @click="formDialog = false">
Close
</v-btn>
<v-spacer></v-spacer>
<v-btn small color="primary" v-if="!isReading" @click="saveData()"
>Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
import {
} from "../services/goals-service/crud-goals-service";
export default {
props: {
title: { type: String },
headers: { type: Array },
items: { type: Array },
loading: { type: Boolean },
functionCallback: { type: Function },
},
data: () => {
return {
formDialog: false,
formDialogTitle: "",
itemData: {},
isCreating: false,
isReading: false,
isUpdating: false,
isDeleting: false,
};
},
methods: {
createData() {
this.itemData = {};
this.formDialogTitle = `${this.title}: New Goal`;
this.isCreating = true;
this.isReading = false;
this.isUpdating = false;
this.isDeleting = false;
this.formDialog = true;
},
readData(item) {
this.itemData = item;
this.formDialogTitle = `${this.title}: ${item.GoalName}`;
this.formDialog = true;
this.isReading = true;
this.isCreating = false;
this.isUpdating = false;
this.isDeleting = false;
},
updateData(item) {
console.log('updateData', item);
},
deleteData(item) {
console.log('deleteData', item);
},
async saveData() {
this.$emit('save-data', this.itemData);
}
}
};
</script>
CodePudding user response：
Create one more Props in Table component called "EnableGoalAction" boolean value
pass this value true/false from your component implemented page based on your need.
you need check if condition in your button like below
<v-btn
fab
x-small
dark
color="green"
v-if="EnableGoalAction"
@click="createData()" //This is the button that add goal
>
<v-icon dark>mdi-plus</v-icon>
</v-btn>