Vue在特定页面上隐藏表单中的字段

Question

我有一个表格作为组件出现在某些页面上。在表格中有一个创建目标的按钮，它打开一个表格来注册信息。但是当我在不同的页面上使用此表时，有些页面我不希望显示该表单上的所有字段（限制可用字段），但在其他页面上这些字段必须可用。下面我放的是表格组件、表单和一个不想加载所有字段的页面。

员工页面

<template>
  <v-card class="mx-auto overflow-hidden" height="900" width="1800">
    <div class="content">
      <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>

表格组件

<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-col cols="1">
                <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>
import {

} from "...";

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,          
    };
  },
  methods: {   
    createData() {
      this.itemData = {};
      this.formDialogTitle = `${this.title}: New Goal`;
      this.isCreating = true;
      this.isReading = false;          
      this.formDialog = true;
    },
    readData(item) {
      this.itemData = item;
      this.formDialogTitle = `${this.title}: ${item.GoalName}`;
      this.formDialog = true;
      this.isReading = true;
      this.isCreating = false;          
    },        
    },
    async saveData() {
      this.$emit('save-data', this.itemData);
    }
  }
};
</script>

表格

<template>
  <v-dialog :value="value" @input="$emit('input', $event)">
    <v-card ref="form">
      <v-card-title class="headline grey lighten-2">
        {{ title }}
      </v-card-title>

      <v-card-text>
        <v-row dense class="mt-5">
          <v-col cols="4">
            <v-text-field
              v-model="GoalName"
              label="GoalName"
              dense
              counter="150"
              maxlength="150"
              :readonly="isReading"
            ></v-text-field>
          </v-col>

          <v-col cols="2">
            <v-text-field
              v-model="min"
              label="Min"
              dense
              counter="150"
              maxlength="150"
              :readonly="isReading"             
            ></v-text-field>
          </v-col>

          <v-col cols="2">
            <v-text-field
              v-model="max"
              label="Max"
              dense
              counter="150"
              maxlength="150"
              :readonly="isReading"
            ></v-text-field>
          </v-col>

          <v-col cols="2">
            <v-text-field
              v-model="target"
              label="Target"
              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="$emit('input', false)">
          Close
        </v-btn>

        <v-spacer></v-spacer>
        <v-btn small color="primary" v-if="!isReading" @click="save()"
          >Save
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  props: ["value", "title", "item", "isReading","enableMinField: { type: Boolean },"], //Attempt using v-if
  
};
</script>

我尝试在表单和表格组件上使用 v-if，但没有成功。在表单中，我将它放在每个字段的 v-text-field 中，然后在 Data 的“headers”字段中的 Table Component 中传递 enableFieldName（例如）。我通过在 v-text-field 中放置一个 v-if 在表格组件中尝试了相同的操作。在 Form 中它不起作用，也就是说，它不会隐藏字段，而在 Table 中它最终会隐藏在表单存在的所有页面中，无论您在 enableFieldName 中传递的是 true 还是 false

Answer 1

你应该在一个对象而不是数组中列出你的道具：

<script>
export default 
{
  props: 
  {
    value:
    {
      type: Boolean,
      default: false
    }, 
    title:
    {
      type: String,
      default: ''
    }, 
    item:
    {
      type: Object,
      required: true
    }, 
    isReading:
    {
      type: Boolean,
      default: false
    },
    enableMinField: 
    { 
      type: Boolean,
      default: false
    }
  }  
};
</script>

然后在模板中实际放一个v-if：

          <v-col cols="2">
            <v-text-field
              v-if="enableMinField"
              v-model="max"
              label="Max"
              dense
              counter="150"
              maxlength="150"
              :readonly="isReading"
            ></v-text-field>
          </v-col>