zoukankan      html  css  js  c++  java
  • ant.design 中各种问题

    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数据
                },      //订单页面改变时触发的函数
    

      

  • 相关阅读:
    Netcat实用操作
    Golang的面向对象实践method
    将大数组里面的小数组平行展开的实现(Making a flat list out of list of lists in Python)
    bootstrap table表格加载本地数据
    扎职扎职扎职扎职扎职扎职扎职扎职扎职扎职扎职
    java使用poi导出excel防止数字变成科学计数法的形式
    element-ui中搜索框回车刷新页面问题的解决方法
    范式建模的理解
    svn去除java编译后文件配置
    java中使用sublist方法获取list集合的前1000条数据
  • 原文地址:https://www.cnblogs.com/6909ye/p/10709757.html
Copyright © 2011-2022 走看看