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

ant3.0.0的Table组件在移动端样式错乱 #8465

Closed
nai6514531 opened this Issue Dec 6, 2017 · 18 comments

Comments

Projects
None yet
6 participants
@nai6514531

nai6514531 commented Dec 6, 2017

Version

3.0.0

Environment

3.0.0 react15.6.0

Reproduction link

https://ant.design/components/table-cn/

Steps to reproduce

官网的例子就可以重现

What is expected?

可以正确显示ui

What is actually happening?

Table组件在移动端样式错乱

@ant-design-bot

This comment has been minimized.

ant-design-bot commented Dec 6, 2017

It will be better to write your issue/comment in English, so more people can understand you.
And this means that more people can help you or benefit from your issue/comment.
See: #4897

@yesmeck

This comment has been minimized.

Member

yesmeck commented Dec 6, 2017

不建议在移动端用 Table,移动端的支持优先级比较低,如果有需求,欢迎给我们 PR。

@wangbagang

This comment has been minimized.

wangbagang commented Dec 6, 2017

不知道有没有好的解决方案,项目用的2.x,现在升级到3.0移动端样式全乱了,以前好好的,希望官方可以出一个解决方案!

@nai6514531

This comment has been minimized.

nai6514531 commented Dec 6, 2017

image
看样子是优化过的。只是还没接受这样的表现~

@wangbagang

This comment has been minimized.

wangbagang commented Dec 6, 2017

如果有右边固定的或者左边固定的列,样式就更丑了,或者表头文字居中显示,真是一种灾难!2.x那种不是挺好的吗,为什么要修改成这个样子?目前只能通过覆写样式回到以前的效果!

@afc163

This comment has been minimized.

Member

afc163 commented Dec 6, 2017

参照 https://semantic-ui.com/collections/table.html 做了响应式的优化。

@afc163 afc163 closed this Dec 6, 2017

@afc163 afc163 reopened this Dec 6, 2017

@nai6514531

This comment has been minimized.

nai6514531 commented Dec 6, 2017

增加一个可选的配置项。可以回到2.x那样的展示

@afc163

This comment has been minimized.

Member

afc163 commented Dec 6, 2017

这么窄的空间,展示起来会不会太挤?

@wangbagang

This comment has been minimized.

wangbagang commented Dec 6, 2017

@afc163 不会的,在2.x表现如下
default
default
还是比较完美的,移动端可以滑动看响应的数据,3.0现在这种header完全对不上,另外如果有fixed的话就无法显示了,ant官网就可以看具体的效果,缩小至手机版的看看

@afc163

This comment has been minimized.

Member

afc163 commented Dec 6, 2017

Fixed 列的表格不做这个响应式优化,是不是就能解决你的问题。

@wangbagang

This comment has been minimized.

wangbagang commented Dec 6, 2017

@afc163 这样子其实也不行的哦,现实中有很多的表格header是很长的,有十几个甚至几十个,这样子的表格如果以现在的column(从上到下)的展现方式表现出来,那么我看到数据的时候就不知道数据对应的header是什么(这点很让人抓狂)!

@afc163

This comment has been minimized.

Member

afc163 commented Dec 6, 2017

有很多的表格header是很长的,有十几个甚至几十个

如果是这样也没有 fixed columns 的话,应该也挤成一团了吧。

@wangbagang

This comment has been minimized.

wangbagang commented Dec 6, 2017

是的,总之目前这种展现方式在移动端确实很不友好。

@afc163

This comment has been minimized.

Member

afc163 commented Dec 6, 2017

我先去掉这段优化好了。

@wangbagang

This comment has been minimized.

wangbagang commented Dec 6, 2017

Thanks, 辛苦了!

@afc163 afc163 closed this in dd3f7f2 Dec 6, 2017

@kossel

This comment has been minimized.

Contributor

kossel commented Dec 11, 2017

我把Table 封包了一下,如果加responsive prop会以类似List 的方法显示
https://kossel.github.io/bsa-ui-2-doc/#!/Table/23

@afc163

This comment has been minimized.

Member

afc163 commented Dec 12, 2017

@kossel 看上去不错,@wangbagang 看看这样的响应式方案是不是可以接受?

@wangbagang

This comment has been minimized.

wangbagang commented Dec 12, 2017

@afc163 我觉的添加一个mode参数更好,mode可选参数有‘normal, responsive, list’等等,这样子有很大的灵活度,也好扩展,有的时候类似list的显示方式会好点,有时候normal好点,把这个选择权交给用户,我们ant只提供选项。

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