a-table为Ant Design Vue的表格组件,使用示例如下所示:
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="pagination"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange"
:customRow="clickThenCheck"
>
<template slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">
编辑
</a>
<a-divider type="vertical" />
<a-dropdown >
<a class="ant-dropdown-link">更多
<ych-icon type="down"/>
</a>
<a-menu slot="overlay">
<a-menu-item v-if="canDel">
<a @click="handleDel(record)">删除</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</template>
</a-table>
【dataSource】:表格数据数组
【columns】:表格列的配置描述,详情参考1.1
【bordered】:是否展示外边框和列边框,boolean类型
【defaultExpandAllRows】:初始时,是否展开所有行,boolean类型
【defaultExpandedRowKeys】:默认展开的行,每行数据key的String数组
【expandedRowKeys】:展开的行,控制属性,展开数据key的String数组
【expandRowByClick】:通过点击行来展开子行
【loading】:页面是否加载中
【pagination】:分页器
【rowClassName】:表格行的类名
【rowKey】:表格行 key 的取值,可以是字符串或一个函数
【rowSelection】:列表项是否可选择
【scroll】:设置横向或纵向滚动,也可用于指定滚动区域的宽和高,建议为 x 设置一个数字,如果要设置为 true,需要配合样式 .ant-table td { white-space: nowrap; }
【showHeader】:是否显示表头
【size】:表格大小 default | middle | small
【title】:表格标题
【customHeaderRow】:设置头部行属性
【customRow】:设置行属性
columns使用示例如下:
columns: [
{
title: '#',
dataIndex: '',
key: 'rowIndex',
width: 40,
align: "center",
customRender: function (t, r, index) {
return parseInt(index) + 1;
}
},
{
title: '项目名称',
dataIndex: 'projectName',
align: 'center',
width: 255,
},
{
title: '项目编号',
dataIndex: 'projectNum',
align: 'center',
width: 255,
}
]
column为列描述数据对象,是 columns 中的一项
column属性说明:
【align】:设置列内容的对齐方式
【ellipsis】:超过宽度将自动省略,暂不支持和排序筛选一起使用。
【colSpan】:表头列合并,设置为 0 时,不渲染
【dataIndex】:列数据在数据项中对应的 key,支持 a.b.c 的嵌套写法
【defaultFilteredValue】:默认筛选值
【filterDropdown】:可以自定义筛选菜单,此函数只负责渲染图层,需要自行编写各种交互
【filterDropdownVisible】:用于控制自定义筛选菜单是否可见
【filtered】:标识数据是否经过过滤,筛选图标会高亮
【filteredValue】:筛选的受控属性,外界可用此控制列的筛选状态,值为已筛选的 value 数组
【filterMultiple】:是否多选
【filters】:表头的筛选菜单项
【fixed】:列是否固定,可选 true(等效于 left) ‘left’ ‘right’
【key】:Vue 需要的 key,如果已经设置了唯一的 dataIndex,可以忽略这个属性
【customRender】:生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引,@return 里面可以设置表格行/列合并,可参考 demo 表格行/列合并
【sorter】:排序函数,本地排序使用一个函数(参考 Array.sort 的 compareFunction),需要服务端排序可设为 true
【sortOrder】:排序的受控属性,外界可用此控制列的排序,可设置为 ‘ascend’ ‘descend’ false
【sortDirections】:支持的排序方式,取值为 ‘ascend’ ‘descend’
【title】:列头显示文字
【width】:列宽度
【customCell】:设置单元格属性
【customHeaderCell】:设置头部单元格属性
【onFilter】:本地模式下,确定筛选的运行函数, 使用 template 或 jsx 时作为filter事件使用
【onFilterDropdownVisibleChange】:自定义筛选菜单可见变化时调用,使用 template 或 jsx 时作为filterDropdownVisibleChange事件使用
【slots】:使用 columns 时,可以通过该属性配置支持 slot 的属性,如 slots: { filterIcon: ‘XXX’}
【scopedSlots】:使用 columns 时,可以通过该属性配置支持 slot-scope 的属性,如 scopedSlots: { customRender: ‘XXX’}
采用分页的形式分隔长列表,每次只加载一个页面。
Pagination使用示例:
data() {
return {
…….
/*分页参数*/
pagination: {
current: 1,
pageSize: 10,
pageSizeOptions: ['10', '20', '50', '100', '200', '500'],
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " 共" + total + "条"
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
},
………
}
}
Pagination属性:
【current(v-model)】:当前页数
【defaultCurrent】:默认的当前页数
【defaultPageSize】:默认的每页条数
【disabled】:禁用分页
【hideOnSinglePage】:只有一页时是否隐藏分页器
【itemRender】:用于自定义页码的结构,可用于优化 SEO
【pageSize(.sync)】:每页条数
【pageSizeOptions】:指定每页可以显示多少条
【showQuickJumper】:是否可以快速跳转至某页
【showSizeChanger】:是否可以改变 pageSize
【showTotal】:用于显示数据总量和当前数据顺序
【simple】:当添加该属性时,显示为简单分页
【size】:当为「small」时,是小尺寸分页
【total】:数据总数
Pagination事件:
【change】:页码改变的回调,参数是改变后的页码及每页条数
【showSizeChange】:pageSize 变化的回调
【expandedRowsChange】:展开的行变化时触发
【change】:分页、排序、筛选变化时触发
【expand】:点击展开图标时触发