1、pagination分页居中
首先我们看见antd的分页默认是在右下角
默认分页
原因是antd在样式中将该组件设置为float: right
默认样式
那解决思路就是更改这个组件样式就可啦，由于它是class选择器绑定的样式，为了让css样式中优先展示我们设置的样式，因此这里需要复习一下关于css选择器的优先级：
- 我们知道两个基础规则，1）相同等级采用后者优先，即样式覆盖；2）css属性加了!important时，无条件优先（最优先，优于内联）。
- 选择器排序如下：
1、内联样式，如style="background: red"；
2、ID选择器；
3、class、伪类、属性选择器；
4、标签、伪元素选择器
通用选择器（*），子选择器（>），相邻同胞选择器（+）等选择器不在4等级之内，权值最低
由以上我们得知内联样式的优先级最高，因此我们采用内联样式的写法进行css定义，在pagination属性中定义style属性：
pagination() {
return {
defaultCurrent: 1,
pageSize: 30,
pageSizeOptions: ["10", "20", "30", "40"],
showSizeChanger: true,
showQuickJumper: true,
//居中
style: {
position: "relative",
right: "50%",
transform: "translate(50%)",
},
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " 共" + total + "条";
},
};
},
2、rowKey无理取闹
先来看看官方的说明
rowKey注意事项
里面就说明了如果<a-table>标签中没有rowKey这属性，那就会出现各种奇怪的错误，我称之为无理取闹吧哈哈哈，具体错误如下。
错误
解决方法也很简单粗暴，就是在<a-table>标签中绑定rowKey属性嘛，那这个属性从字面就能看出来需要是不同的值，那我们可以这样定义
<a-table
:columns="columns"
:data-source="dataSource"
:pagination="pagination"
:loading="false"
:rowKey="
(record, index) => {
return index;
}
"
>
</a-table>
record 为每一条数据, index 索引
