首先感谢作者的插件,很好用!
我的问题
在使用过程中遇到了如下的需求,想问一下有没有解决方法。
问题描述
1.管理后台创建的富文本内容中含表格,表格有多列,有的甚至超过10多列的。
2.前端显示时,想把表格部分外面在套一层,并且设置为可水平滑动的,这样就能较好的显示表格。即想实现表格部分按原大小显示,并且可以水平滑动看到多列。
3.如果表格的宽度没有超过屏幕宽度,则自动调整为屏幕宽。
目前,上面的这个功能能实现吗?如果不能实现我还有什么曲线救国的方案吗?
在使用过程中遇到了如下的需求,想问一下有没有解决方法。
1.管理后台创建的富文本内容中含表格,表格有多列,有的甚至超过10多列的。
2.前端显示时,想把表格部分外面在套一层,并且设置为可水平滑动的,这样就能较好的显示表格。即想实现表格部分按原大小显示,并且可以水平滑动看到多列。
3.如果表格的宽度没有超过屏幕宽度,则自动调整为屏幕宽。
目前,上面的这个功能能实现吗?如果不能实现我还有什么曲线救国的方案吗?
参考以下方法:
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