<template>
  <a-table :dataSource="dataSource" :columns="columns" :pagination="false">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
          <div class="flex">
            <span class="w-32">{{ record.name }}</span>
            <span class="w-32">{{ record.value }}</span>
          </div>
      </template>
      <template v-if="column.key === 'action'">
        <template v-if="record.key === '2'">
          <a-button>重置</a-button>
        </template>
      </template>
    </template>
  </a-table>
</template>
<script>
export default {
  setup() {
    return {
      columns: [
        {
          title: '开发者ID',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          align: 'center',
          width: 240,
        },
      ],
      dataSource: [
        {
          key: '1',
          name: '租户ID',
          value: '10550'
        },
        {
          key: '2',
          name: 'AppSecret',
          value: 'sdfsdfsdfsdfs'
        },
      ],
    };
  },
};
</script>
