vue+element ui 前端分页，element Table组件的序号

template

<el-table :data="displayList" v-loading="loading">
	<el-table-column
	  type="index"
	  label="序号"
	  width="70"
	>
	  <template slot-scope="scope">
	    <span>{{ (paginationObj.currentPage - 1) * paginationObj.pageSize + scope.$index + 1 }}</span>
	  </template>
	</el-table-column>
</el-table>

ts，js声明分页变量、前端分页展示数据

// 在data/state中声明分页数据对象
paginationObj: {
  pageSize: 10,
  currentPage: 1,
  total: 0
},
// 若为前端分页，通过计算属性返回展示数据 list为接口返回的数据
// -- vue3写法
const displayList = computed(() => {
  return state.list.slice(
	  (state.paginationObj.page - 1) * state.paginationObj.pageSize,
		state.paginationObj.page * state.paginationObj.pageSize
	)
});
// -- vue2写法
computed: {
  displayList: function() {
	return this.list.slice(
	  (state.paginationObj.page - 1) * state.paginationObj.pageSize,
		state.paginationObj.page * state.paginationObj.pageSize
	)
  }
}