elementUI表格的使用以及自动生成每一行的序号

表格：

<template>　　

　　　 <div id="my_charge">

　　　　　//表格　

　　　　　 <el-table :data="tableData" stripe style="width:100%">

                        <el-table-column prop ='index' label="序号" min-width="209"></el-table-column>

                        <el-table-column prop = 'pro_name' label="套餐" min-width="209"></el-table-column>

                        <el-table-column prop ='order_id' label="订单号" min-width="209"></el-table-column>

                        <el-table-column prop = 'pay_time' label="支付时间" min-width="209"></el-table-column>

                        <el-table-column prop ='pay_price' label="付款金额" min-width="209"></el-table-column>

                        <el-table-column prop = 'remark' label="订单备注" min-width="209"></el-table-column>

                    </el-table>

　　　　　　//分页

　　　　　　<el-pagination 

                            @size-change="handleSizeChange" 

                            @current-change="handleCurrentChange" 

                            :current-page="currentPage" 

                            :page-sizes="pageSizes" 

                            :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" 

                            :total="totalCount">

               　　 </el-pagination>

　　　</div>

</tamplate>

<script>

　　var currentVal = null;

export default  {　　

data(){

         return {

            tableData: [],//table数据

            currentPage: 1,//默认显示第几页

            totalCount: 0,//根据接口获取数据的页数

            pageSizes: [5,10,15,20],//选择每页展示的数据条数

            pageSize: 10,//默认每页显示的数据条数

         }

     },

　　methods: {　　

 　　 //分页

         //每页显示的条数

         handleSizeChange(val){

             this.pageSize = val;

             this.getOrderHisData(this.currentPage,(this.currentPage-1)*this.pageSize,this.pageSize);

              //每次改变一页显示的数据条数时页面跳转到第一页

             this.currentPage = 1;

         },

         handleCurrentChange(val){

             //改变当前页码

              this.currentPage = val;

              this.getOrderHisData(this.currentPage-1,(this.currentPage-1)*this.pageSize,this.pageSize)

         },

        //渲染数据表格(分页在这里传给后台的是当前起始数据的条数，以及每页的数据条数)

        getOrderHisData(nowPage,start,size) {//当前页码nowPage默认为0,起始数据条数start默认为0,每一页的数据条数size默认为10

            var nowPage = nowPage || 0;

            var start = start || 0; //start = (nowPage-1)*10

            var size = size || 10;

            axios.post(url,{

                token: token,//用户token

                start: start,

                size: size

            }).then(res=>{

                var datas = res.data.data;//这里是对象数组形式（[{},{}...]）

                datas.forEach((item,index)=>{//生成订单序号 

                item.index = (currentVal.currentPage-1)*currentVal.pageSize + index +1;

                })
　　　　//在then里面获取不到this，就定义了一个currentVal在created阶段保存this,有啥好的解决方法欢迎留言

                currentVal.tableData = datas; //将返回数据赋值给tableData

                currentVal.totalCount = + res.data.data.size;//totalCount其类型为number类型，这里等同于Number(currentVal.totalCount )

            }).catch(err=>{

                console.log(err);

            })

        }，

　　created(){

　　　　currentVal = this;//将this赋给变量在then()回调中使用

　　　　this.getOrderHisData()；//表格第一页数据

　　}

　　}
}

</script>