使用场景:

用于基础数据和流程数据的列表展示,可排序、可按条件搜索
**

样式与交互逻辑:

  1. 上边放搜索条件框,每行按三个条件等分宽度(可无搜索条件),下边放表格展示区,均为自适应内容区的宽度;
  2. 表格数据在指定高度内展示,超过则滚动(以搜索栏和表格一屏展示完为准),横向滚动时操作栏需固定;
  3. 表格提供分页条数设置,快速翻页等功能,分页信息和搜索条件均在地址栏呈现,以便刷新时还能保留页面状态;
  4. 表格列的宽度可以按照常用字数分几个档位,同时兼容特殊宽度;
  5. 列内容单行显示,超出显示省略号,鼠标移入浮层显示全部?;
  6. 支持表格列自定义显示项及显示顺序(需要调整目前样式),保存在客户端
  7. 修改或删除数据后,列表保持查询条件不变重查;新增数据后,页码回到第一页,其它查询条件不变,重查

**

demo展示:

image.png
image.png
**

开发使用:

参考AntD组件:
Table,参考链接:https://ant-design.gitee.io/components/table-cn/

我们如何使用:
参考丰田项目TableList表格组件和条件过滤Filter组件
image.png

image.png