Vue实现表格组件新增按钮在指定页面隐藏的技术问询

要实现仅在特定页面隐藏表格组件的新增按钮，其余页面正常显示，我们可以通过给表格组件添加一个控制显示状态的Props来实现，具体步骤如下：

1. 修改表格组件，添加控制按钮显示的Props #

在表格组件中新增一个布尔类型的Props showAddButton，默认值设为true（即默认显示按钮），然后用v-if指令控制新增按钮的显示。

修改后的表格组件代码 #

<template>
  <div id="table">
    <v-card class="mx-auto mb-3">
      <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"
        class="elevation-1"
        :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-if控制按钮是否显示 -->
              <v-col cols="1" v-if="showAddButton">
                <v-btn
                  class="mx-5 mt-2"
                  fab
                  x-small
                  dark
                  color="green"
                  @click="createData()"
                >
                  <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
                class="ml-1"
                @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
                class="ml-1"
                @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
                class="ml-1"
                @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 class="headline grey lighten-2">
        {{ formDialogTitle }}
      </v-card-title>

      <v-card-text>
        <v-row dense class="mt-5">
          <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>
export default {
  props: {
    title: { type: String },
    headers: { type: Array },
    items: { type: Array },
    loading: { type: Boolean },
    functionCallback: { type: Function },
    // 新增控制按钮显示的Props，默认显示
    showAddButton: {
      type: Boolean,
      default: true
    }
  },
  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>

2. 在员工页面配置按钮显示状态 #

在员工页面中，给需要隐藏新增按钮的MetasTableComponent组件绑定:showAddButton="false"，不需要隐藏的组件保持默认即可（不添加该属性则默认显示按钮）。

修改后的员工页面代码 #

<template>
  <v-card class="mx-auto overflow-hidden" height="900" width="1800">
    <div class="content">
      <!-- 隐藏Global Goal表格的新增按钮 -->
      <MetasTableComponent
        :title="'Global Goal'"
        :headers="headers"
        :items="globalGoals"
        :loading="loadingGobalGoals"
        :showAddButton="false"
      />
      <!-- 隐藏Sectorial Goals表格的新增按钮 -->
      <MetasTableComponent
        :title="'Sectorial Goals'"
        :headers="headers"
        :items="sectorialGoals"
        :loading="loadingMetasSetoriais"
        :showAddButton="false"
      />
      <!-- Individual Goals表格保持显示新增按钮 -->
      <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>

这种方案通过Props传递控制参数，既保持了表格组件的复用性，又能灵活控制不同页面中按钮的显示状态，符合Vue组件化开发的最佳实践。

内容的提问来源于stack exchange，提问作者Diego Lima