在Element-ui组件库中table表格组件的自定义索引问题

在使用组件开发的过程中,有些组件的属性不好进行设置,直接使用数据里面的索引进行表格索引的设置会产生不必要的麻烦,现在我把自己遇到的麻烦和解决办法分享一下

一、 需求

需求是在翻页时,所有的数据的索引是连续不断的。但是组件提供给我们的type="index"属性只能达到这个效果


由于分页请求的效果,我们无法使用索引来给所有的数据项一个连续索引的目的

二、解决办法

碰到这种情况,我们首先去查看文档,看有没有其他的办法进行解决

文档给出了一个自定义的index方案,就是可以通过index传值来进行自定义索引,所以我们可以这样进行解决

<template>
   <div>
      <el-table>
          <el-table-column label="序号" width="120" type="index" :index="hIndex" />
      </el-table>  
   </div>
</template>

<script>
export default {
methods:{
 hIndex(index) {
      return index + 1 + (this.pageParams.page - 1) * this.pageParams.pagesize
    }
  }
}
</script>

通过动态给index值就可以达到自定义序号的目的