前言
https://www.antdv.com/components/overview-cn/
https://www.antdv.com/components/table-cn
基本实例
1 | <a-table :dataSource="dataSource" :columns="columns" :pagination="false"/> |
TS
1 | const columns = reactive([ |
表格+分页
1 | <a-table :dataSource="dataSource" :columns="columns" :pagination="false" :scroll="{ x: 'max-content' }"/> |
其中
:showSizeChanger="false"
:不展示pageSize
切换器。
TS1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42const columns = reactive([
{
title: '姓名',
dataIndex: 'name',
key: 'name'
},
{
title: '年龄',
dataIndex: 'age',
key: 'age'
},
{
title: '住址',
dataIndex: 'address',
key: 'address'
}
])
const dataSource = reactive([
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号'
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号'
}
])
//当前页码 从1开始
const currentPage = ref(1)
//数据总条数
const totalNum = ref(30)
function pageChange(page: number, pageSize: number) {
console.info('page', page)
console.info('pageSize', pageSize)
}
模板
1 | <a-table :dataSource="dataSource" :columns="columns" :pagination="false"> |
TS
1 | const columns = reactive([ |
操作按钮
1 | <a-table :dataSource="dataSource" :columns="columns" :pagination="false"> |
TS
1 | const columns = reactive([ |
水平滚动条
1 | <a-table :dataSource="dataSource" :columns="columns" :scroll="{ x: 'max-content' }"> </a-table> |
x: 'max-content'
指的是水平超过max-content
就会产生滚动条
固定的区域使用fixed
实现:
1 | const columns = reactive([ |
树状表格
只要表格的数据是树状数据即可
1 | <a-table |
其中
childrenColumnName
是子列表的字段。
rowKey
是行的唯一标识,如果不设置会出现一展开全都展开的情况。
跨页多选
1 | <template> |
表格单选
1 | <template> |