Vue バックグラウンドでステータスラベルをエレガントに記述する例

序文

バックエンドシステムの開発では、レビューステータス、返品申請ステータスなど、リストに表示されるステータスフィールドがいくつかあることが多く、ステータスフィルタリングのリストクエリ条件が付随していることがよくあります。同時に、ステータス表示はさまざまな色に対応しています。コードを書くとき、多くの人がよくこれを行います：

<テンプレート>
  <el-form :model="クエリ">
    <el-form-item label="承認ステータス" prop="ステータス">
      <el-select v-model="query.status" クリア可能>
        <el-オプション
          v-for="ステータスオプション内の項目"
          :key="アイテム.値"
          :label="アイテム.ラベル"
          :value="アイテムの値"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary">クエリ</el-button>
      <el-button type="danger">リセット</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="リスト">
    <el-table-column label="承認ステータス">
      <テンプレート #default="{行}">
        <el-tag v-if="row.status === 0" type="primary">審査中</el-tag>
        <el-tag v-if="row.status === 1" type="success">レビューが完了しました</el-tag>
        <el-tag v-if="row.status === 2" type="danger">監査に失敗しました</el-tag>
      </テンプレート>
    </el-table-column>
  </el-table>
</テンプレート>

エクスポートデフォルト{
  データ（） {
    戻る {
      クエリ: {
          ステータス: null
      },
      ステータスオプション: [
          { ラベル: '審査中'、値: 0 },
          { ラベル: 'レビュー成功'、値: 1 },
          { ラベル: '監査に失敗しました'、値: 2 }
      ]、
      リスト: []
    }
  }
}

上記のコードは要件を満たしていますが、十分にエレガントではなく、コードのメンテナンスコストが高くなります。

タグに v-if が多すぎるため、データ内のデータが繰り返され、冗長性が生じます。
追加や変更があった場合、複数の箇所を変更する必要があります。例えば、テキストを変更する場合は、ドロップダウンボックスとテーブルの両方を変更する必要があります。
表示する必要があるこのステータスが複数のページにある場合、コピーと貼り付けを行うと、要件が変更されたときに変更コストが必然的に増加します。

最適化

上記の問題に対し、弊社では以下の対策を実施し救済を図ってまいります。

変数の抽出

statusOptions を格納する定数ファイルを作成し、異なる色を区別して表示するための el-tag コンポーネントの type フィールドを追加して、最後にエクスポートします。

// 定数/index.js
// 監査ステータス const statusOptions = [
  { ラベル: '審査中'、値: 0、タイプ: 'プライマリ' },
  { ラベル: 'レビュー成功'、値: 1、タイプ: '成功' },
  { ラベル: '監査に失敗しました'、値: 2、タイプ: '危険' }
]

輸出 {
  ステータスオプション
}

二次包装 el-tag コンポーネント

// コンポーネント/統計タグ.vue
<テンプレート>
  <el-tag :type="getValue('type')">
    {{ getValue('ラベル') }}
  </el-tag>
</テンプレート>

エクスポートデフォルト{
  名前: 'ステータスタグ',
  
  小道具: {
    オプション:
      タイプ: 配列、
      必須: true、
      デフォルト: () => []
    },
    状態： {
      タイプ: [文字列、数値],
      必須: true
    }
  },
  
  計算: {
    getValue({ オプション, ステータス }) {
      戻り値 (キー) => {
        const item = options.find(e => e.value === ステータス)
        戻り値 (item && item[key]) || ''
      }
    }
  }
}

使用

<テンプレート>
  <el-form :model="クエリ">
    <el-form-item label="承認ステータス" prop="ステータス">
      <el-select v-model="query.status" クリア可能>
        <el-オプション
          v-for="ステータスオプション内の項目"
          :key="アイテム.値"
          :label="アイテム.ラベル"
          :value="アイテムの値"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary">クエリ</el-button>
      <el-button type="danger">リセット</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="リスト">
    <el-table-column label="承認ステータス">
      <テンプレート #default="{行}">
        <!-- 使用法 -->
        <ステータスタグ 
          :options="ステータスオプション"
          :status="行のステータス"
        />
      </テンプレート>
    </el-table-column>
  </el-table>
</テンプレート>

'@/components/status-tag' から StatusTag をインポートします。
// '@/const' から { statusOptions } をインポートします

エクスポートデフォルト{
  コンポーネント:
    ステータスタグ
  },
  
  データ（） {
    戻る {
      ステータスオプション
    }
  }
}

最適化後、変更があった場合は、すべての部分を変更する必要はなく、const/index.js ファイルを変更するだけで済みます。

// 定数/index.js
// 監査ステータス const statusOptions = [
  { ラベル: '審査中'、値: 0、タイプ: 'プライマリ' },
  { ラベル: 'レビュー成功'、値: 1、タイプ: '成功' },
  { ラベル: '監査失敗'、値: 2、タイプ: '危険' },
  // キャンセルステータスを追加 { ラベル: 'レビューがキャンセルされました'、値: 3、タイプ: '警告' }
]

輸出 {
  ステータスオプション
}

要約する

これで、Vue 背景のエレガントなライティングステータスラベルに関するこの記事は終了です。Vue ライティングステータスラベルに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Linuxシステムにおけるキー認証に基づくSSHサービスのプロセス

>>: MySQL バージョンは、2 つのタイムスタンプ型の値をサポートしていないバージョンよりも低いです。