VTable有滚动情况下底部和右侧边框不显示怎么办?

333 阅读1分钟

问题描述

如截图效果,VTable中表格内容显示不完整(有滚动条的情况下),如何能让表格中的右侧边框和底部边框都显示?

解决方案

可通过在theme主题中的frameStyle添加borderLineWidthborderColor配置 ,不过添加上述配置后,表格顶部和左侧的边框和单元格的边框会有两层边框 效果也不好。

进一步研究配置,发现了cellInnerBorder配置项,专门为了处理这种情况的配置,将其设置为false,则边缘的单元格的边框线将不再绘制。

用到的配置项定义如下:

/** frameStyle 是配置表格整体的样式 */
frameStyle ?:FrameStyle;
/** 单元格是否绘制内边框,如果为true,边界单元格靠近边界的边框会被隐藏 */
cellInnerBoder?:boolean;  // true | false

代码示例

  const option = {
    records,
    columns,
    autoWrapText: true,
    limitMaxAutoWidth: 600,
    heightMode: 'autoHeight',
    theme:{
      frameStyle:{ // 配置的表格整体的边框
         borderLineWidth: 1, //  设置边框宽度
         borderColor: "#CBCBCB" //  设置边框颜色
      },
      cellInnerBorder:true  // 单元格是否绘制内边框,可结合情况设置true或false
    }
  };
  const tableInstance = new VTable.ListTable(container, option);

结果展示

在线效果参考:codesandbox.io/p/sandbox/v…

相关文档

设置表格边框demo:codesandbox.io/p/sandbox/v…

相关api:www.visactor.io/vtable/opti…

www.visactor.io/vtable/opti…

www.visactor.io/vtable/opti…

github:github.com/VisActor/VT…