vue3+ant design vue实现表格数据‘是‘‘否‘展示

1、效果图

2、

<a-table
   class="table_color"
   :dataSource="tableData"
   :columns="columns"
   :pagination="false"
   :loading="loading"
>
   <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'investigate'">
         {{ record[column.key] ? '是' : '否' }}
      </template>
      <template v-if="column.key === 'agency'">
         {{ record[column.key] ? '是' : '否' }}
      </template>
      <template v-if="column.key === 'inLine'">
         {{ record[column.key] ? '是' : '否' }}
      </template>
      <template v-if="column.key === 'offLine'">
         {{ record[column.key] ? '是' : '否' }}
      </template>
   </template>
</a-table>


const columns = ref([
    {
      title: '是否考察',
      dataIndex: 'investigate',
      key: 'investigate',
      align: 'center',
    },
    {
      title: '是否代理',
      dataIndex: 'agency',
      key: 'agency',
      align: 'center',
    },
    {
      title: '是否线内兼职',
      dataIndex: 'inLine',
      key: 'inLine',
      align: 'center',
    },
    {
      title: '是否跨线兼职',
      dataIndex: 'offLine',
      key: 'offLine',
      align: 'center',
    },
]}