elementui table 分页 和 tabel 前加序列号

记录下来备忘

结构如下

Report.vue

<template>
  <div>
    <home-header></home-header>
    <div class="report">
      <div class="rs_1"></div>
      <div class="rs_4">检测报告查询</div>
      <div class="tools">
 
      <table-view @changPage="changPage" :reportData="reportData" :count="count" :Offset="Offset" :Limit="Limit"></table-view>
 
      </div>
    </div>
    <footer-view></footer-view>
 
  </div>
</template>
<script>
import HomeHeader from '../header/Header'
import FooterView from '../footer/FooterView'
import TableView from './components/TableView'
import axios from 'axios'
import {urlApi} from '@/api/api.js'
import { format } from '@/util/util.js'
export default {
  name:'Report',
  components:{
    HomeHeader,
    FooterView,
    TableView
  },
  data(){
    return{
      reportData:[],
      count:0,
      Offset:0,
      Limit:10
    }
  },
  methods:{
    changPage(v){
      this.Offset = (v-1)*10;
      this.getReport(this.Offset,this.Limit);
    },
    getReport(Offset=0,Limit=10){
      /* post */
      let params = new URLSearchParams();
      params.append('Offset',Offset);
      params.append('Limit',10);
      params.append('Limit',10);
      params.append('postType','web');
 
      axios.post(urlApi.getReport,params)
         .then(this.getReportSucc)
      /* post */
    },
    getReportSucc(res){
      this.reportData = [];
      if(res.data.error_code==0 && res.data.reason){
        this.count = res.data.count;
        res.data.reason.forEach((item,index) => {
         // console.log(format(item.SEND_TIME));
         // item.PATIENT_NAME = item.PATIENT_NAME.split(',')[0]
          item.PATIENT_NAME = item.PATIENT_NAME.charAt(0)+'***';
          item.SEND_TIME = format(item.SEND_TIME)
        });
        this.reportData = res.data.reason;
      }
    }
  },
  mounted() {
    this.getReport();
  },
}
</script>
<style lang="stylus">
  .report
    width 1280px
    min-height 900px
    background #161F60
    margin 51px auto 0
    position relative
    color white
    float left
    left 50%
    margin-left -640px
    .rs_1
      position absolute
      top 0
      left 0
      width 73px
      height 75px
      background url('../../assets/dat/rs_1.png') no-repeat
    .rs_2
      position absolute
      bottom 0
      left 0
      width 1280px
      height 228px
      background url('../../assets/dat/rs_2.png') no-repeat
      z-index 9
    .rs_3
      position absolute
      top 0px
      right 0
      width 80px
      height 6px
      background url('../../assets/dat/rs_3.png') no-repeat
    .rs_4
      position absolute
      top 28px
      left 25px
      width 221px
      height 46px
      background url('../../assets/dat/rs_4.jpg') no-repeat
      text-align center
      line-height 46px
      font-size 18px
    .tools
      margin-top 140px
</style>

　　Table.vue

<template>
  <div>
 
    <el-table
      :data="reportData"
      border
      style="width: 100%">
      <el-table-column
        label="序号"
        width="70"
      >
      <template scope="scope">
        <span>
          {{scope.$index+((Offset+10)/10-1)*Limit+1}}
        </span>
      </template>
      </el-table-column>
      <el-table-column
        prop="PATIENT_NAME"
        label="患者姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="SEND_TIME"
        label="送检日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="PHY_NAME"
        label="医生"
        width="180">
      </el-table-column>
      <el-table-column
        prop="REPORT_TYPE"
        label="检测类型"
        width="180">
      </el-table-column>
      <el-table-column
        prop="PKG_NUM"
        label="检测条码"
        width="180">
      </el-table-column>
      <el-table-column
        prop="REPORT_STATUS"
        label="REPORT_STATUS"
        width="180">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="button" v-if="scope.row.REPORT_STATUS == '有报告'"  @click="checkDetail(scope.row.REPORT_CODE,scope.row.PATIENT_NAME)">下载报告</el-button>
          <div v-else>{{scope.row.REPORT_STATUS}}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @current-change="handleCurrentChange"
        small
        background
        layout="prev, pager, next"
        :total="count">
      </el-pagination>
    </div>
 
    <el-dialog :title="name" :visible.sync="dialogTableVisible">
      <el-table border :data="ihcdata">
        <el-table-column property="REPORT_TYPE" label="报告类型" width="150"></el-table-column>
        <el-table-column property="SEND_TIME" label="送检日期" width="200"></el-table-column>
        <el-table-column property="BARCODE" label="样本检测条码"></el-table-column>
 
        <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="button" @click="checkDownload(scope.row.ATTACH_ID)">下载</el-button>
        </template>
        </el-table-column>
 
      </el-table>
 
      <el-table border :data="ngsdata" class="myrow">
        <el-table-column property="REPORT_TYPE" label="报告类型" width="150"></el-table-column>
        <el-table-column property="SEND_TIME" label="送检日期" width="200"></el-table-column>
        <el-table-column property="BARCODE" label="样本检测条码"></el-table-column>
 
        <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="button" @click="checkDownload(scope.row.ATTACH_ID)">下载</el-button>
        </template>
        </el-table-column>
 
      </el-table>
    </el-dialog>
 
  </div>
</template>
<script>
import axios from 'axios'
import {urlApi} from '@/api/api.js'
import { format } from '@/util/util.js'
export default {
  name:'TableView',
  props:{
    reportData:Array,
    count:Number,
    Offset:Number,
    Limit:Number
  },
  data(){
    return{
      dialogTableVisible:false,
      name:'',
      ihcdata: [],
      ngsdata:[],
    }
  },
  methods:{
    checkDownload(id){
      //console.log(v);
      /* post */
      /*
      let iparams = new URLSearchParams();
      iparams.append('ATTACH_ID',id);
 
      axios.post(urlApi.downloadReport,iparams)
           .then(this.downloadReportSucc)
      */
      /* post */
      window.location.href=urlApi.downloadReport+'&ATTACH_ID='+id;
    },
    downloadReportSucc(res){
 
      if(res.data.error_code != 0){
        this.$message(res.data.msg);
      }else{
        console.log(res);
        window.location.href=res;
      }
    },
    handleCurrentChange(currentPage){
      this.$emit("changPage",currentPage);
    },
    checkDetail(detail,name){
      this.name = name+'的检测报告';
      this.getReportsByOrderId(detail,name);
    },
    getReportsByOrderId(reportcode,name){
      /* post */
      let params = new URLSearchParams();
      params.append('REPORT_CODE',reportcode);
      params.append('postType','web');
 
     axios.post(urlApi.getReportsByOrderId,params)
         .then(this.getReportsByOrderIdSucc)
      /* post */
    },
    getReportsByOrderIdSucc(res){
      if(res.data.error_code==0 && res.data.reason){
        console.log(res.data.reason)
        res.data.reason.IHCList.forEach((item,index) => {
          //console.log(res.data.reason);
         item.SEND_TIME = format(item.SEND_TIME)
        });
        res.data.reason.NGSList.forEach((item,index) => {
          //console.log(res.data.reason);
         item.SEND_TIME = format(item.SEND_TIME)
        });
        this.ihcdata = [];
        this.ngsdata = [];
        this.ihcdata = res.data.reason.IHCList;
        this.ngsdata = res.data.reason.NGSList;
        this.dialogTableVisible = true;
      }
    }
  }
}
</script>
<style lang="stylus">
  .page
    width 100%
    text-align center
    margin-top 20px
  .myrow
    margin-top 30px
</style>