Element: [Table] 希望 type="index" 的 Column 可以支持分页

Created on 15 Nov 2016  ·  6Comments  ·  Source: ElemeFE/element

table分页,序号使用的是type="index",点击下一页后,序号没有对应按照上一页的数据继续增加,而是直接显示为1,2,3,。。。
image

feature request

Most helpful comment

目前 Element ui 版本为 1.4.4,按官方说法:

1.1 后支持通过 Scoped slot 自定义模板。之前的 inline-template 同样适用,但不推荐。


上图中红线圈出的部分可以修改为如下代码:

  <el-table-column
        min-width="25"
        label="序号">
        <template scope="scope">
            {{scope.$index + addIndex}}
        </template>
    </el-table-column>

All 6 comments

是需要优化的点,不过目前 Table 组件并不包含 Pagination,currentPage 和 pageSize 都是未知,需要权衡下怎么去实现。

@furybean 希望表格多多完善,表格应该是使用最多的组件之一。

今天又去好好做琢磨了一下element的api文档和vue,突然发现了一个可以完美解决table分页的序号连续问题。具体请看代码,使用了element的table组件的inline-template,然后在其中使用vue的获取序号的方式:$index来进行。其实element文档中也有说明,不过只能说时间太紧,element的团队的伙伴们还没有来得急讲文档写的很详细。具体如下图所示:
1、此图是使用element的inline-template
image
2、data申明默认数据
image
3、此图是调用分页组件的分页方法
image
4、此图是element的说明文档中提及的
image

@furybean 已经ok啦,谢谢

目前 Element ui 版本为 1.4.4,按官方说法:

1.1 后支持通过 Scoped slot 自定义模板。之前的 inline-template 同样适用,但不推荐。


上图中红线圈出的部分可以修改为如下代码:

  <el-table-column
        min-width="25"
        label="序号">
        <template scope="scope">
            {{scope.$index + addIndex}}
        </template>
    </el-table-column>

_20180620115114
新版的文档用这个方法也可以

Was this page helpful?
0 / 5 - 0 ratings