React 前端导航

antd v4 版本table 表格在移动端使用

为什么使用的是antd v4版本,而不是 v5版本呢?应为v5 版本用在移动端直接样式都没有了,v4好歹还有基本的样式。

需求背景

我们需要的表格功能包括,多表头,固定列,可展开的行,文案超出展示省略号等,这些功能从antd文档上看都是支持配置的,但是在移动端还是会有些问题。

问题列表

  • 可展开的icon在移动端展示异常,可通过 expandable.expandIcon 自定义icon解决或者自己调样式。
  • 固定列且行可展开的情况下,给固定列的td元素设置display:flex,会导致ios上固定列失效。
  • table 的scroll 属性配置{{ x: "max-content" }} 时,自定义的列宽度会失效,所以不能使用 max-content,只能写固定的数值。
  • 自定义单元格样式使用 onCell 配置,自定义表头单元格样式使用 onHearCell 配置,示例代码如下:
onCell() {
  return {
    style: {
      borderRight: 'none',
    },
     className: "your_className"
  };
},
onHeaderCell() {
  return {
    style: {
      borderRight: 'none',
    },
     className: "your_className"
  };
},

声明:本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。邮箱:farmerlzj@163.com。 本站原创内容未经允许不得转载,或转载时需注明出处: 内容转载自: React前端网:https://qianduan.shop/blogs/detail/124
想做或者在做副业的朋友欢迎加微信交流:farmerlzj,公众号:生财空间站。

#react#antd#table

相关推荐

react中实现markdown文件读取展示

react中实现markdown文件读取展示

umi实践问题汇总--持续更新

在使用umi的过程中所遇到问题的记录汇总