关于element-ui:饿了么UI中的eltable常见的翻页勾选和序号递增功能实现步骤

失常状况下，在一个后盾管理系统中，都会有勾选选中性能，也都会有翻页性能。本文记录一下，比拟常见的翻页勾选性能和翻页序号递增性能的实现形式

翻页勾选保留性能

第一步和第二步

<template>
  <div id="box">
    <!-- 
      第二步：指定一个 key 去确认标识这一行的数据，因为若要翻页保留，就须要确认保留的数据是哪一个，所以咱们就给每一行确定个举世无双的身份标识，这里咱们在 el-table 标签上
             应用 row-key 去失去每一行的身份标识
     -->
    <el-table
      :row-key="getRowKey"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <!-- 
        第一步：开启选中翻页保留模式 即：:reserve-selection="true" 
               默认是 false。即 默认选中翻页不保留之前勾选的数据
      -->
      <el-table-column
        type="selection"
        width="55"
        :reserve-selection="true"
      ></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="age" label="年龄" width="120"> </el-table-column>
      <el-table-column prop="home" label="他乡住址" show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </div>
</template>

第三步

methods: {
 /*
      第三步，个别咱们都是用 id 作为每一行数据的非凡标识，所以这里返回的是 row 上面的 id 作为标识。当然
             这里不 return row 上面的 id 也行，只有可能确保某个字段是举世无双的，不会反复的，就可 return
             return row 上面的这个字段也是能够的
    */
    getRowKey(row) {console.log("看看每一行的数据", row);
      return row.id;
    },
  }

翻页序号递增性能

翻页序号递增性能不像翻页勾选保留性能那样还须要每一条数据做标识，而是通过计算得进去的。

第一步

<!-- 序号列：index 绑定计算方法 indexMethod
 -->
  <el-table-column
    :index="indexMethod"
    label="序号"
    type="index"
    width="50"
    fixed
  >
  </el-table-column>

第二步

methods: {
  // 序号翻页递增
    indexMethod(index) {console.log('索引数下标',index)
      let nowPage = this.tablePages.pageIndex; // 以后第几页，依据组件取值即可
      let nowLimit = this.tablePages.pageSize; // 以后每页显示几条，依据组件取值即可
      return index + 1 + (nowPage - 1) * nowLimit ; // 这里能够了解成一个公式
    },
  }

好忘性不如烂笔头