antd+vue table表格 是否啟用 狀態顯示

小功能記錄一下：
單元格里面兩個狀態或者三個狀態切換顯示問題。官網里tag標簽都是同時展示兩個或三個，我這里是根據狀態展示對應狀態標簽。
通過試用v-if來控制顯示標簽，顏色樣式自己設置。

這里展示的是部分代碼

 

<template>
  <a-table :columns="columns" :data-source="data">
    <template slot="name" slot-scope="text">
      <a>{{ text }}</a>
    </template>
    
    //這是第一種，三個狀態標簽
    <template slot="status" slot-scope="text">
      <span v-if="text === '1'"><a-tag >待上傳</a-tag></span>
      <span v-else-if="text === '2'"><a-tag color="#87d068">未下載</a-tag></span>
      <span v-else><a-tag color="cyan">已下載</a-tag></span>
    </template>
    
    //這是第二種兩個狀態
    <template slot="status" slot-scope="text">
      <span v-if="text === '1'"><a-tag color="green">啟用</a-tag></span>
      <span v-else><a-tag color="red">停用</a-tag></span>
    </template>
    
 </a-table>
</template>

<script>

//這里是表頭定義設置
const columns = [
  {
    title: '名稱',
    dataIndex: 'Name',
  },
  {
     title: '狀態',
     dataIndex: 'status',
     scopedSlots: { customRender: 'status'} //這里配置關聯
  },  
]

</script>