フォーム内のステータスデータをタグラベル表示に変換する方法

システムのフロントエンドページの美しさを考慮して、データ内のステータス情報は通常、Tag タグに置き換えられます。ちょっとした操作でページの美しさが大幅に向上しますので、前後の比較を以下に示します。コードは、Vue および Element-ui コンポーネントに基づいて実装されています。
変更前：

変更後：

変更前の元のコードは次のようになります。

<el-table :data="tableData" border stripe header-cell-class-name="headerBgColor">
          <el-table-column type="index" label="编号" width="100"></el-table-column>
          <el-table-column prop="name" label="数据集名称" width="200"></el-table-column>
          <el-table-column prop="time" label="上传时间" width="200"></el-table-column>
          <el-table-column prop="status" label="可用状态" width="200"></el-table-column>
</el-table>

変更されたコードは次のようになります。

 <el-table :data="tableData" border stripe header-cell-class-name="headerBgColor">
          <el-table-column type="index" label="编号" width="100"></el-table-column>
          <el-table-column prop="name" label="数据集名称" width="200"></el-table-column>
          <el-table-column prop="time" label="上传时间" width="200"></el-table-column>
          <el-table-column prop="status" label="可用状态" width="200">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.status == 1">可用</el-tag>
              <el-tag type="danger" v-if="scope.row.status == 0">不可用</el-tag>
            </template>
          </el-table-column>
</el-table>