1.表格的单行class --> 官方api介绍
配置 -->
<a-table :columns="columns" //绑定每列配置 :dataSource="data" //绑定数据 @change="onChange" //表格改变时 :rowClassName="trclass" //每行class rowKey="data.orderSn" //绑定key值 :pagination='pagination' //分页器 :locale="object" //默认文案设置
> </a-table> <script>
trclass(record, index){ //record 是每一行的对象属性,我们来判断对象上属性值来返回class,index是索引,我们也可以判断索引值%2余数造成隔行ckass不同的效果
if(record.orderStatus=='待支付'){
return 'tr'
}else {
return ''
}
}, //根据是否待支付显示button按钮
其中也有一项配置分页器 根据后台返回的值去分页
this.$axios.post('url',this.orderData, //分页请求数据,携带this.orderData { headers:{ 'token':localStorage.getItem('token') } }).then(res=>{
this.pagination.total = res.data.results.total; // 在这里我们就能确定多少页,比如传过来275就会自动分成28页 分页器配置项,详见下文
orderData:{ //this.orderDate 的属性 (后台接口) pageNumber:1, //当前页码数 pageSize:10, //获取多少条数据 properties:['createTime'], //排序字段 sort:'DESC', //排序方式
//其中我们查询全部数据不需要携带订单状态 },
1 pagination:{ 2 defaultPageSize:10, //默认的每页条数 3 pageSize:10, //pageSize 4 total:0, //数据的条数 5 // totalPages:0, 6 current:1 //当前页数 这里配置的是默认第一页 具体可见https://vue.ant.design/components/pagination-cn/ 7 },
onChange(pagination, filters, sorter) { this.orderData.pageNumber = pagination.current; //请求第几页=页面改变时候的页码数 this.pagination.current = this.orderData.pageNumber; //当前页数 = 请求第几页的页数 this.inlist() //将新的对象传递过去来重新请求data数据 }, //订单页面改变时触发的函数