表格操作列和表头固定

概述

当表格字段过多或者字段内容过长需要展示时候,会出现横向滚动条,这时操作列固定在右侧会更加方便操作

默认值以及建议

  1. 当字段宽度值为空的时候默认宽度是 200, 单位是 px;
  2. 当修改字段数据库类型或者控件类型的时候, 如果字段宽度没有值, 会填充建议的值 建议:
    1. 数字: 120
    2. 年, 月: 120
    3. 年月,年月日,时分秒: 160
    4. 年月日时分秒: 180

计算规则

  1. 当在页面展示的所有字段宽度之和 小于 在当前屏幕上的表格宽度的时候, 不会出现滚动条, 左右两侧的固定列自然也不会生效
  2. 当在页面展示的所有字段宽度之和 大于 在当前屏幕上的表格宽度的时候, 会出现滚动条, 如果设置了左右两侧的固定列, 会生效
  3. 当修改自定义列显示的时候 , 会重新计算列宽
  4. 关于操作列的按钮: 会在每次数据改变的时候, 根据 JS 增强过滤,按钮表达式过滤, 然后计算展示多少个按钮,和展示的按钮文本字数之和来动态计算宽度
  5. 如果设置了固定表头, 当每个分页展示数量超出十条后, 会滚动表格内容区域

示例-表格宽度小于字段列宽之和

表格列宽示例效果1

示例-表格宽度大于字段列宽之和

表格列宽示例效果2


感谢您的反馈。如果您有关于如何使用 KubeSphere 的具体问题,请在 Slack 上提问。如果您想报告问题或提出改进建议,请在 GitHub 存储库中打开问题。