el-table 序号自增

需求 表格第一页 1-10 第二页 11-20

定义数据

data() {
    
    
    return {
    
    
      tableData: [],
      pageNum:1,
      pageSize:10,
    };
  },

组件传参

<realNameTable
        @tabLiActive="TabsWitching"
        :tableData="tableData"
        :currentPage="pageNum"
        :pageSize="pageSize"
/>

index是绑定方法

<el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column type="index" :index="table_index" label="序号" width="120"></el-table-column>
        <el-table-column prop="phone" label="账号" width="120"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="idNum" width="200" label="身份证号"></el-table-column>
        <el-table-column prop="sex" width="60" label="性别"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <span class="look" @click="jumpDetails(scope.row)">查看</span>
          </template>
        </el-table-column>
      </el-table>
      

ok

table_index(index) {
    
    
      return (this.currentPage - 1) * this.pageSize + index + 1;
    },

亲测有效

猜你喜欢

转载自blog.csdn.net/weixin_46210850/article/details/120202649