Add a serial number to the table component el-table in element ui (each page starts from 1 and keeps increasing)

Each page is sorted starting from 1:

element-ui intimately provides us with a custom index, which can define various serial numbers we want

As follows: just increase type="index" and it will count from 1 by default

    <el-table-column align="center" label="序号"  type="index" width="180"></el-table-column>

But in this method, each page is sorted from 1, if you want to keep increasing, you must use the second method below. 

Sort in increasing order starting from 1: 

In el-table:

  <el-table-column label="序号" align="center" min-width="30">
             <template slot-scope="scope">
                <span v-text="getIndex(scope.$index)"> </span>
             </template>
  </el-table-column>

In methods: 

 //获取表格序号
    getIndex($index) {
        //表格序号
        return (this.currentPage - 1) * this.pageSize + $index + 1
    },

Among them, currentPage is the current page, and pageSize is the number of items displayed on each page (current page), which can be modified according to your own field name.

Or you can abbreviate directly as follows without writing methods:

 <el-table-column align="center" label="序号" width="180">
        <template scope="scope">
            <span>{
   
   {(currentPage - 1) * pageSize + scope.$index + 1}}</span>
        </template>
  </el-table-column>


At this point the problem has been resolved.

Guess you like

Origin blog.csdn.net/a1059526327/article/details/108446952