Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
yuanshengchao opened this issue Nov 15, 2016 · 6 comments
Closed

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

yuanshengchao opened this issue Nov 15, 2016 · 6 comments

Comments

@yuanshengchao
Copy link

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

@furybean
Copy link
Contributor

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

@jfb
Copy link

jfb commented Nov 16, 2016

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

@furybean furybean changed the title table分页 序号问题 [Table] 希望 type="index" 的 Column 可以支持分页 Nov 17, 2016
@yuanshengchao
Copy link
Author

yuanshengchao commented Nov 24, 2016

今天又去好好做琢磨了一下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

@yuanshengchao
Copy link
Author

@furybean 已经ok啦,谢谢

@lhajh
Copy link

lhajh commented Sep 15, 2017

目前 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>

@ceerqingting
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants