<script setup>
import tableList from './table.vue'

</script>

# 表格 {#table}

## 示例

<ClientOnly>
    <tableList/>
</ClientOnly>

这里是完整代码

<div class="composition-api" style="font-size:14px;">

```vue
<script setup>
  import { ref } from 'vue'

  const tableData = ref([
    {
      "productType": 0,
      "instanceName": "dns_65eefc77-930d-4270-a228-3c6d7220c816",
      "instanceType": 1,
      "region": "cn-shanghai-2"
    },
    {
      "productType": 0,
      "instanceName": "dns_65eefc77-930d-4270-a228-3c6d7220c816",
      "instanceType": 1,
      "region": "cn-shanghai-2"
    },
    {
      "productType": 0,
      "instanceName": "dns_65eefc77-930d-4270-a228-3c6d7220c816",
      "instanceType": 1,
      "region": "cn-shanghai-2"
    },
    {
      "productType": 0,
      "instanceName": "dns_65eefc77-930d-4270-a228-3c6d7220c816",
      "instanceType": 1,
      "region": "cn-shanghai-2"
    },
    {
      "productType": 0,
      "instanceName": "dns_65eefc77-930d-4270-a228-3c6d7220c816",
      "instanceType": 1,
      "region": "cn-shanghai-2"
    },
  ])
  const statusMap = [
    {
      type: 'loading',
      text: '处理中'
    },
    {
      type: 'success',
      text: '正常'
    },
    {
      type: 'error',
      text: '异常'
    },
    {
      type: 'info',
      text: '待审批'
    },
    {
      text: '自定义颜色',
      color: '#666666'
    }
  ]
  const columns = ref([
    {
      key: "instanceType",
      title: "普通",
    },
    {
      type: 'slot',
      slotName: 'middle'
    },
    {
      type: 'format',
      key: "productType",
      title: "文本格式化",
      format([data, row, i]) {
        return `自定义${row.instanceType + i}`
      },
      group: [
        {label: '全部', value: ''},
        {label: '运行中', value: 'active'},
        {label: '已关闭', value: 'stopped'}
      ],
      hideGroupHeader: true
    },
    {
      key: "instanceName",
      title: "link可点击带回调",
      type: 'link',
      click: ([val, row, i]) => {
        alert(`我被点击了${val}`)
      },
      format([data, row, i]) {
        return `别看了点我`
      },
    },
    {
      key: "region",
      title: "状态",
      type: 'status',
      width: 100,
      props([data, row, i]) {
        return statusMap[i]
      }
    }
  ]);

  function changeGroup(val) {
    console.log('change-group',val)
    alert(`我被点击了${JSON.stringify(val)}`)
  }

  function clickRow(data, i, key) {
    console.log('click-row', {
      data, i, key
    })
    alert(`我被点击了第${i + 1}行`)
  }

  const tableInstance = ref(null)
  function checkAll() {
    tableInstance.value.checkAll()
  }
  function uncheckAll() {
    tableInstance.value.uncheckAll()
  }


</script>

<template>
  <div>
    <div class="search">
      <Button class="margin-right-base" type="primary" @click="checkAll">全选</Button>
      <Button type="primary" @click="uncheckAll">全不选</Button>
    </div>
    <CommonTable
        ref="tableInstance"
        :data="tableData"
        :columns="columns"
        :group="{ productType: '' }"
        @$change:group="changeGroup"
        @clickRow="clickRow"
    >
      <template v-slot:middle>
        <TableColumn title="中间插槽" key="test1">
          <template v-slot:template="[data, index]">
            <Input size="small" value="请输入" style="width: 70%" />
          </template>
        </TableColumn>
      </template>
      <TableColumn fixed="right" title="操作" key="test2">
        <template v-slot:template="[data, index]">
          <div>
            <Button type="link">编辑</Button>
            <Button type="link">删除</Button>
          </div>
        </template>
      </TableColumn>
    </CommonTable>
  </div>
</template>

<style scoped lang="less">
  .search {
    padding: 10px 0;
    text-align: right;
    .margin-right-base {
      margin-right: 20px;
    }
  }
</style>



```

</div>

支持所有的@king-design/vue的Table的属性、事件、方法，原生Table属性方法请查看[Table文档](https://design.ksyun.com/components/table/)
