a***@qq.com
a***@qq.com
  • 发布:2020-04-21 15:13
  • 更新:2020-04-21 15:55
  • 阅读:718

#插件讨论# 【 Parser富文本插件【全端支持】 - Jyf 】多列表格的适配问题

分类:uni-app

首先感谢作者的插件,很好用!

我的问题

在使用过程中遇到了如下的需求,想问一下有没有解决方法。

问题描述

1.管理后台创建的富文本内容中含表格,表格有多列,有的甚至超过10多列的。

2.前端显示时,想把表格部分外面在套一层,并且设置为可水平滑动的,这样就能较好的显示表格。即想实现表格部分按原大小显示,并且可以水平滑动看到多列。

3.如果表格的宽度没有超过屏幕宽度,则自动调整为屏幕宽。

目前,上面的这个功能能实现吗?如果不能实现我还有什么曲线救国的方案吗?

2020-04-21 15:13 负责人:无 分享
已邀请:
Jyf

Jyf

参考以下方法:

  • 小程序和 App
    config.js 中的 filter 中添加
    filter(node) {  
    if (node.name == 'table') {  
      setTimeout(() => { // 这个延时是为了 table 的 border、cellpadding、cellspacing 属性不失效,与内部处理有关  
        var table = Object.assign({}, node); // 拷贝一个 table 节点  
        node.name = 'div'; // 将原 table 改为一个滚动层  
        node.attrs = {  
          style: 'overflow: scroll'  
        }  
        node.children = [table];  
        table.attrs.style += ';min-width: 100%'; // 没超过屏幕宽度则调整为屏幕宽度  
      }, 0)  
    }  
    }  
  • H5
    直接操作 dom 实现
    // 在 load 事件中或之后  
    document.getElementsByTagName('table').forEach(function(table) {  
    var div = document.createElement('div');  
    div.style.overflow = 'scroll';  
    table.parentNode.replaceChild(div, table);  
    div.appendChild(table);  
    table.style.minWidth = '100%';  
    })  
  • Jyf

    最新版添加了一个 autoscroll 属性,设置后可以直接给所有表格加一个滚动层

    2020-05-13 22:08

该问题目前已经被锁定, 无法添加新回复