基本常规的一些用法都能在官网上查到:https://www.antdv.com/components/table-cn/
以下是目前项目遇到的一些技能点,总结下记录下来
1、基础用法:
<template>
<a-table
:columns="columns"
:data-source="data"
:pagination="pagination" <!-- :pagination="false" 不分页 -->
>
<a slot="name" slot-scope="text">{
{ text }}</a>
</a-table>
</template>
<script>
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
scopedSlots: { customRender: 'name' },
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: 80,
},
{
title: 'Address',
dataIndex: 'address',
key: 'address 1',
ellipsis: true,
},
{
title: 'Long Column Long Column Long Column',
dataIndex: 'address',
key: 'address 2',
ellipsis: true,
},
{
title: 'Long Column Long Column',
dataIndex: 'address',
key: 'address 3',
ellipsis: true,
},
{
title: 'Long Column',
dataIndex: 'address',
key: 'address 4',
ellipsis: true,
},
];
const dataSource = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
tags: ['nice', 'developer'],
}
];
export default {
data() {
return {
columns,
dataSource,
pagination: {
pageNum: 1,
pageSize: 50
},
};
},
};
</script>
2、向后台获取数据
getSourceData() {
const params = {
pageNum: this.pagination.pageNum,
pageSize: this.pagination.pageSize,
data: queryParams
}
getDataSource(params).then((res) => { //封装好的axios请求
if(res.code === 200){
this.dataSo