基础使用
<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>
自定义表头
<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
Array<Record<string, string | number>>
默认值 () => []
表格数据