表格对于后台管理类的系统来说，至关重要，系统大多数功能都需要以表格的方式展示业务内容，系统开发人员多数时间也是围绕着表格进行业务编码，接触过很多后台管理系统的框架，我个人第一首先也是看表格功能是否强大.

对于低代码平台来说，也是非常核心的内容，关系到系统好不好用，功能能不能支撑各种业务场景的需求，所以也是至关重要的内容.

列表视图后续会写多篇文章来分解具体的功能设计，感兴趣可以查看前端相关代码，这篇文章主要是讲一下表格内容的使用配置，不涉及到查询及各种高级控件的使用.

请参照开源网站的“表单常规示例->控件综合应用”这个页面体验及对照查看相关配置，这个页面功能单一，但里面的各种列表使用场景比较复杂，将所有平常开发常见的功能的集成到里面了，并且是真正意义的零代码，全部通过配置完成，前后端都没有任何代码，界面配置立马生效.

基础功能参见antd的表格使用，特殊功能如下:

• 点击“字符字段”打开编辑对话框（点击字段接入规则引擎，将选中的行数据作为事件参数传入规则引擎，执行打开编辑视图对话框、根据选择行Id获取后端数据、将数据绑定到编辑视图）
• 日期、字典、电话等字段自定义显示
• 外键字段格式化显示（数据库只存储外键Id）
• 人员字段格式化显示（数据库只存储人员外键）
• 表格按钮权限控制
• 表头分页
• 是否换行显示
• 自定义列显示
• 多选行
• 表格扩展内容显示

  。

列表视图属性设置

属性常规设置即为设置ant的table控件，其他一些扩展字段如下:

1. tableDiv
   设置a-table外层的div样式，默认样式为：'min-height: 560px'
2. rowKey
   前端表格的行主键，一般情况为"id"，可以不设置，当查询出来的列表数据主键不为id是，需要设置，如：id_a
3. tableType
   自定义扩展字段，多数情况不需要设置，如果是树列表，需要设置为“tree”
4. columns
   参见 Table组件设置 ，定义表格列， 特殊处理（宽度width不设置，默认置为80；对齐align不设置，默认置为center，扩展linked属性，标识表格字段可以点击，点击事件可接入规则引擎；扩展option_is属性，标识字段列可自定义是否显示；扩展option_selected属性，配合option_is使用，标识字段列默认是否显示）
5. columnsExpanded columnsExpandedColSpan
   columnsExpanded表格展开更多内容字段列定义，columnsExpandedColSpan定义展开显示多少行，值为1-4，默认为4
6. colOperateWidth
   定义列表操作列的宽度，当列表操作控件或者列表更多控件定义了，列表中的操作列才会显示。
7. excelTemplate
   导入导出Excel配置模版信息，参见附录【导入导出Excel模版】，如： [{"name":"电话","field":"phoneNumber","fieldType":5,"isRequred":true,"validateType":99,"validateValue":"[{'customerVal':'Phone','trigger':'blur'}]"},{"name":"学历","field":"education","fieldType":5,"validateType":11}]
8. excelDicts
   字段字典映射集合数据，表示Excel中用到的数据字典映射信息，定义哪个字段用到哪个数据字典，如： [{"dict":"sex","field":"sex"},{"dict":"edu","field":"education"},{"dict":"title","field":"positionalTitle"}]
9. excelName
   导入导出Excel文件名称，如：人员管理测试Excel数据
10. uniqKey
    导入时唯一字段检测（这里的字段为数据库字段，注意不是转换为驼峰命名之后的字段，多个字段组合用;号隔开），如：UserName。
11. eval_query
    执行后端方法获取查询参数后执行的JS脚本，自定义扩展处理查询条件，本质上执行eval函数，特殊场景使用，比如执行查询之前，将查询条件做自定义特殊处理，如：界面查询条件只查询年月，到后端映射为时间段查询 sqlWhere.children.forEach(r=>{if(r.field==='checkTime'){r.value=[r.value.format('yyyy-MM')+'-01 00:00:00',r.value.add(1,'month').format('yyyy-MM')+'-01 00:00:00']}}) ，参考附录：【 自定义查询条件 】
12. defaultSorting
    默认后端查询方法排序，如： checkTime desc,stockCheckType asc 等

高级功能说明

• 表头分页
  参照antd设置即可，如果存在自定义列显示，且所有列都不显示时，分组字段也不显示

              
                {
      "
                 title":   "日期字段", "  children":  [ { "  dataIndex":   "dateTimeField", "  title":   "日期字段", "  scopedSlots":  { "  customRender":   "dateTimeField" }, "  width":   160 }, { "  dataIndex":   "dateField", "  title":   "日期字段2", "  scopedSlots":  { "  customRender":   "dateField" }, "  width":   160, "  option_is":   true, "  option_selected":   true } ] }                                       
              
            

• 自定义列显示
  在表格右上角，用户可点击下拉勾选自定义显示哪些字段列option_is属性控制是否允许用户选择，option_selected控制默认是否勾选

              
                {
          "
                 dataIndex":   "dateField", "  title":   "日期字段2", "  scopedSlots":  { "  customRender":   "dateField" }, "  width":   160, "  option_is":  true, "  option_selected":   true }                   
              
            

• 是否换行显示
  在表格右上角，checkbox选择，默认情况表格单元格内容超过展示宽度，用“...”代替，当勾选时，表格单元格内容换行显示所有内容。
• 超连接字段
  扩展linked属性，点击单元格内容，可触发事件，接入规则引擎，触发的事件会将表格行作为事件参数传递到规则引擎，比如点击“合同编号”字段打开编辑合同对话框等（需要设置scopedSlots属性）。

              
                {
      "
                 align":   "center", "  dataIndex":   "stringField", "  title":   "字符", "  sorter":  true, "  linked":  true, "  scopedSlots":  { "  customRender":   "stringField" } }                  
              
            

• 表格更多内容

columnsExpanded表格展开更多内容字段列定义，columnsExpandedColSpan定义展开显示多少行，值为1-4，默认为4，表格更多列不支持option_is和option_selected属性，支持linked属性设置，“是否换行显示”功能也支持 。

• 超出内容自动横向滚动

表格控件设置了超出表格所有列长度时，自动出现横向滚动条 。

• 其他高级功能

更多高级功能，可增加列表自定义控件，格式化显示表格内容 。

  。

个人业余时间开发进度确实快不起来，很多设计思想我认为还是很不错的，完全可以应用到实际项目中，欢迎关注.

---

  wike文档地址： https://gitee.com/kuangqifu/sprite/wikis/pages 。

后端开源地址： https://gitee.com/kuangqifu/sprite 。

前端开源地址：https://gitee.com/kuangqifu/spritefronts 体验地址： http://47.108.141.193:8031  （首次加载可能有点慢，用的阿里云最差的服务器） 自定义表单文章地址： https://www.cnblogs.com/spritekuang/ 流程引擎文章地址： https://www.cnblogs.com/spritekuang/category/834975.html  （采用WWF开发，已过时，已改用Elsa实现， https://www.cnblogs.com/spritekuang/p/14970992.html   。

  。

最后此篇关于企业级自定义表单引擎解决方案（十八）--列表视图属性设置的文章就讲到这里了,如果你想了解更多关于企业级自定义表单引擎解决方案（十八）--列表视图属性设置的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。