フレームワーク ruoyi-vue (フロントエンドおよびバックエンド バージョン) 辞書の使用による

16452841:

表示効果:

 ステータスの実際の値は、講師レビューの辞書管理で定義されている 1 です。

手順: まず、ruoyi の辞書管理で辞書を定義します。

辞書管理 

次に、辞書に従って必要な値を設定します

値を設定した後、フロントエンドテーブルのデータがエコーされます

ここでは、まずフロントエンドの vue プロジェクトを開きます。ページに対応する vue ファイルをエコーする必要があります。

先ほど定義した辞書辞書をエクスポートのデフォルトに追加します: ['定義した辞書タイプ']

次に、テーブル内で、対応する値を表示する辞書として設定し、次の操作を使用してデータの表示を完了する必要があります。

 <el-table-column label="状态" align="center" prop="state" >
                  <template slot-scope="scope">
                    <dict-tag
                      :options="dict.type.leave_state"
                      :value="scope.row.state"
                    >
                    </dict-tag>
                  </template>
  </el-table-column>

 完了後、ページを更新すると表示されるようになります