Ein Beispiel für das elegante Schreiben von Statusbeschriftungen im Vue-Hintergrund

<Vorlage>
  <el-form :model="Abfrage">
    <el-form-item label="Genehmigungsstatus" prop="status">
      <el-select v-model="query.status" löschbar>
        <el-Option
          v-for="Element in Statusoptionen"
          :Schlüssel="Artikel.Wert"
          :label="Artikel.label"
          :Wert="Artikel.Wert"
        />
      </el-Auswahl>
    </el-form-item>
    <el-form-item>
      <el-button type="primary">Abfrage</el-button>
      <el-button type="danger">Zurücksetzen</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="Liste">
    <el-table-column label="Genehmigungsstatus">
      <template #default="{ Zeile }">
        <el-tag v-if="row.status === 0" type="primary">Wird überprüft</el-tag>
        <el-tag v-if="row.status === 1" type="success">Überprüfung erfolgreich</el-tag>
        <el-tag v-if="row.status === 2" type="danger">Prüfung fehlgeschlagen</el-tag>
      </Vorlage>
    </el-Tabellenspalte>
  </el-Tabelle>
</Vorlage>

Standard exportieren {
  Daten() {
    zurückkehren {
      Abfrage: {
          Status: null
      },
      Statusoptionen: [
          { label: 'Wird überprüft', value: 0 },
          { label: 'Überprüfung erfolgreich', value: 1 },
          { label: 'Audit fehlgeschlagen', value: 2 }
      ],
      Liste: []
    }
  }
}

// const/index.js
// Prüfstatus const statusOptions = [
  { label: 'Wird überprüft', value: 0, type: 'primary' },
  { label: 'Überprüfung erfolgreich', value: 1, type: 'success' },
  { Label: 'Audit fehlgeschlagen', Wert: 2, Typ: 'Gefahr' }
]

exportieren {
  Statusoptionen
}

// Komponenten/Statistik-Tag.vue
<Vorlage>
  <el-tag :type="getValue('type')">
    {{ getValue('Bezeichnung') }}
  </el-tag>
</Vorlage>

Standard exportieren {
  Name: 'StatusTag',
  
  Requisiten: {
    Optionen:
      Typ: Array,
      erforderlich: wahr,
      Standard: () => []
    },
    Status: {
      Typ: [Zeichenfolge, Zahl],
      erforderlich: true
    }
  },
  
  berechnet: {
    getValue({ Optionen, Status }) {
      return (Schlüssel) => {
        const item = Optionen.finden(e => e.value === status)
        return (Artikel && Artikel[Schlüssel]) || ''
      }
    }
  }
}

<Vorlage>
  <el-form :model="Abfrage">
    <el-form-item label="Genehmigungsstatus" prop="status">
      <el-select v-model="query.status" löschbar>
        <el-Option
          v-for="Element in Statusoptionen"
          :Schlüssel="Artikel.Wert"
          :label="Artikel.label"
          :Wert="Artikel.Wert"
        />
      </el-Auswahl>
    </el-form-item>
    <el-form-item>
      <el-button type="primary">Abfrage</el-button>
      <el-button type="danger">Zurücksetzen</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="Liste">
    <el-table-column label="Genehmigungsstatus">
      <template #default="{ Zeile }">
        <!-- Verwendung -->
        <Status-Tag 
          :Optionen="Statusoptionen"
          :status="Zeile.status"
        />
      </Vorlage>
    </el-Tabellenspalte>
  </el-Tabelle>
</Vorlage>

importiere StatusTag aus '@/components/status-tag'
// Importimport { statusOptionen } von '@/const'

Standard exportieren {
  Komponenten:
    StatusTag
  },
  
  Daten() {
    zurückkehren {
      Statusoptionen
    }
  }
}

// const/index.js
// Prüfstatus const statusOptions = [
  { label: 'Wird überprüft', value: 0, type: 'primary' },
  { label: 'Überprüfung erfolgreich', value: 1, type: 'success' },
  { Bezeichnung: 'Auditfehler', Wert: 2, Typ: 'Gefahr' },
  // Stornierungsstatus hinzufügen { Bezeichnung: 'Überprüfung abgebrochen', Wert: 3, Typ: 'Warnung' }
]

exportieren {
  Statusoptionen
}