基础使用

姓名	性别
Jason	male
Lucy	female

<script setup>
import { ref } from 'vue'
const tableData = [
  { name: 'Jason', gender: 'male' },
  { name: 'Lucy', gender: 'female' },
]

const tableColumns = [
  { title: '姓名', field: 'name' },
  { title: '性别', field: 'gender' },
]
</script>

<template>
  <c-table
    row-key="name"
    :data="tableData"
    :columns="tableColumns"
  />
</template>

点击展开/收起代码

点击打开交互式编辑器

自定义表头

姓名	性别
Jason	male
Lucy	female

<script setup>
const tableData = [
  { name: 'Jason', gender: 'male' },
  { name: 'Lucy', gender: 'female' },
]

const tableColumns = [
  { title: '姓名', field: 'name' },
  { title: '性别', field: 'gender' },
]
</script>

<template>
  <c-table row-key="name" :data="tableData" :columns="tableColumns">
    <template #th-name="{ title }">
      <span style="color: purple; font-size: 58px">
        {{ title }}
      </span>
    </template>
  </c-table>
</template>

点击展开/收起代码

点击打开交互式编辑器

自定义列单元格

姓名	性别	操作
Jason	male
Lucy	female

<script setup>
const tableData = [
  { name: 'Jason', gender: 'male' },
  { name: 'Lucy', gender: 'female' },
]

const tableColumns = [
  { title: '姓名', field: 'name' },
  { title: '性别', field: 'gender' },
  { title: '操作', field: 'operations' },
]
</script>

<template>
  <c-table row-key="name" :data="tableData" :columns="tableColumns">
    <template #td-operations>
      <c-button label="编辑" size="sm" />
      <c-button label="删除" theme="negative" size="sm" />
    </template>
  </c-table>
</template>

点击展开/收起代码

点击打开交互式编辑器

CTable API

Props

Slots

striped

boolean

默认值  false

是否为条纹表格

columns

Array<TableColumn>

默认值  () => []

表格列配置

data

Array<Record<string, string | number>>

默认值  () => []

表格数据

rowKey

string

默认值  'id'

行数据唯一键