V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
mumu0934
V2EX  ›  微信

[微信小程序] 怎么实现跨行跨列的复杂表格?

  •  
  •   mumu0934 · 2018-02-22 15:12:07 +08:00 · 6635 次点击
    这是一个创建于 2464 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题,在微信小程序中有个单元表格跨行跨列的复杂表格需要展示。

    之前在网页上就是直接用 table 标签配合 colspan 和 rowspan 这两个属性就可以了。

    但是 WXML 并不支持 HTML 的 table 标签,所以试了下 colspan 和 rowspan 也是无效的。

    倒是可以利用 flex 布局来实现表格的效果,但是只能是规规矩矩的简单表格。对于跨行跨列的表格就没办法了。

    现在只能把截图放在哪里了。但是加载比较慢,有点影响用户体验。

    还是想尽量用 WXML+WXSS 的代码来展现这个复杂的表格。

    不知道各位有什么好的建议供我参考下呢?也希望微信小程序团队尽快开发出 table 组件。

    11 条回复    2021-02-24 18:03:13 +08:00
    twm
        1
    twm  
       2018-02-22 15:14:21 +08:00
    这样复杂的话,直接通过网页显示吧。
    murmur
        2
    murmur  
       2018-02-22 15:17:52 +08:00
    手机上表格体验差点 1b,想上复杂表格还得 excel
    learnshare
        3
    learnshare  
       2018-02-22 15:19:10 +08:00
    放弃小程序...
    mumu0934
        4
    mumu0934  
    OP
       2018-02-22 15:20:13 +08:00
    @twm 我也有过这种想法,但是个人类型的小程序暂不支持使用 web-view 组件打开网页。
    mumu0934
        5
    mumu0934  
    OP
       2018-02-22 15:21:30 +08:00
    @murmur 哈哈,比起微信小程序里面下载 excel 文件的话,还是加载图片更好一点。☺
    locktionc
        6
    locktionc  
       2018-02-22 15:21:55 +08:00
    用 wxcss 来划线,用线强行拼一个表格出来。然后把内容填进去就可以了。
    mumu0934
        7
    mumu0934  
    OP
       2018-02-22 15:21:58 +08:00
    @learnshare 嗯,你说的有道理
    shapl
        8
    shapl  
       2018-02-22 15:23:30 +08:00
    'flex 布局来实现表格的效果'
    配合 class,显示隐藏某些边框,不能达到合并的效果么?
    可能你想要的效果更加复杂,供参考。
    mumu0934
        9
    mumu0934  
    OP
       2018-02-22 15:24:34 +08:00
    @locktionc 方案是可行的,就是有点烦。。😄我还是多给官方反馈下,看看能不能后面改善下
    mumu0934
        10
    mumu0934  
    OP
       2018-02-22 15:28:44 +08:00
    @shapl 嗯,好的。画格子去了😂
    letwewell
        11
    letwewell  
       2021-02-24 18:03:13 +08:00
    求问最后实现了吗?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   958 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 21:50 · PVG 05:50 · LAX 13:50 · JFK 16:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.