vue 表格里的需要自增

最新推荐文章于 2025-03-17 10:19:02 发布

Software攻城狮

最新推荐文章于 2025-03-17 10:19:02 发布

阅读量2.9k

点赞数

分类专栏： Vue3 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_43799793/article/details/126192014

版权

Vue3 专栏收录该内容

12 篇文章

订阅专栏

这篇博客介绍了如何在Vue3项目中使用ElementUI表格实现序号在翻页后依然保持连续自增的效果。通过在`el-table-column`上设置`type=index`，并结合`customRender`插槽，利用`filterObj.current`来计算每页的起始序号，从而达到目标。代码示例展示了如何在`render`函数中处理这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element ui 表格里的需要自增

表格里的序号自增：给el-table-column标签加上type="index"即可

vue3 antd jsx table实现表格序号翻页后连续自增

data(){
	return {
	   columns: [
        {
          title: '序号',
          dataIndex: 'order',
          key: 'order',
          width: '10%',
          align: 'center',
          className: 'table-center',
          slots: {
          	  customRender: 'order'
         	 }
        }
       ]
	}
},
setup(){
	 let filterObj = reactive({
      total: 0,
      pageSize: 10,
      pageCur: 1,
      current: 1
    });
    return {
		filterObj 
	}
},
render() {
// { record,index }   record代表对应一行的数据   index代表第一页行的下标  每页都是从0开始  所以通过当前页数来进行处理就可以实现翻页连续自增
  const slots = {
	 order: ({ index }) => {
        return <span>{(index += 1) + (this.filterObj.current - 1) * 10}</span>;
      },
   };
    return (
      <>
      //这里  rowKey 就可以用index  如果record里面没有唯一的键  就用这个
        <a-table data-source={this.dataSource} v-slots={slots} columns={this.columns} rowKey={(record,index) => index} pagination={this.filterObj} onChange={this.pageChange} />
      </>
    );
 }