技術標籤：vue.jsvue.js前端

vue 實現自定義序號， 並且翻頁序號累加

第一種：

<template>
  <el-table
    ref="singleTable"
    :data="tableData"
    highlight-current-row
    @current-change="handleCurrentChange"
    style="width: 100%">
    <el-table-column
      type="
 
index"
      label="序號"
      width="50">
    </el-table-column>
    <el-table-column
      property="repayNumber"
      label="還款編號"
      width="120">
    </el-table-column>
    <el-table-column
      property="lendNumber"
 

      label="放款編號"
      width="120">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          repayNumber: 'HK20221312310250082114',
          lendNumber: 'FK12021121017050016277'
        }
 
, {
          repayNumber: 'HK2020121017050039844',
          lendNumber: '165170'
        }, {
          repayNumber: 'HK2020121110250082114',
          lendNumber: '165171'
        }],
        currentRow: null
      }
    },

    methods: {
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      }
    }
  }
</script>

第二種：

      <el-table style="width: 100%" :data="tableData" stripe :header-cell-style="{ background: '#F2F5F9' }">
        <el-table-column label="序號" type="index" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ (pageNo- 1) * pageSize+ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="repayNumber" align="center" label="還款編號"></el-table-column>
        <el-table-column prop="lendNumber" align="center" label="放款編號"></el-table-column>
      </el-table>

第三種：

<template>
  <div class="repayment">
    <!-- 表格內容 -->
    <div class="tablebox">
      <Table :columns="tableCol" :data="tableData"></Table>
    </div>
  </div>
</template>
<script>
export default {
  name: "Repayment",
  data () {
    return {
      searchForm: {
        pageNo: 1,
        pageSize: 10
      },
      tableCol: [
        {
          title: '序號',
          render: (h, params) => {
            return h("span", params.index + (this.searchForm.pageNo - 1) * this.searchForm.pageSize + 1);
          },
          align: 'center',
          width: "80"
        },
        {
          title: '還款編號',
          key: 'repayNumber',
          align: 'center',
          width: '250'
        },
        {
          title: '放款編號',
          key: 'lendNumber',
          align: 'center'
        }
      ],
      tableData: [],
    };
  },
};
</script>

三種方法效果如圖：