企業級自定義表單引擎解決方案（十八）--列表檢視屬性設定

表格對於後臺管理類的系統來說，至關重要，系統大多數功能都需要以表格的方式展示業務內容，系統開發人員多數時間也是圍繞著表格進行業務編碼，接觸過很多後臺管理系統的框架，我個人第一首先也是看錶格功能是否強大。

對於低程式碼平臺來說，也是非常核心的內容，關係到系統好不好用，功能能不能支撐各種業務場景的需求，所以也是至關重要的內容。

列表檢視後續會寫多篇文章來分解具體的功能設計，感興趣可以檢視前端相關程式碼，這篇文章主要是講一下表格內容的使用設定，不涉及到查詢及各種高階控制元件的使用。

請參照開源網站的「表單常規範例->控制元件綜合應用」這個頁面體驗及對照檢視相關設定，這個頁面功能單一，但裡面的各種列表使用場景比較複雜，將所有平常開發常見的功能的整合到裡面了，並且是真正意義的零程式碼，全部通過設定完成，前後端都沒有任何程式碼，介面設定立馬生效。

基礎功能參見antd的表格使用，特殊功能如下：

點選「字元欄位」開啟編輯對話方塊（點選欄位接入規則引擎，將選中的行資料作為事件引數傳入規則引擎，執行開啟編輯檢視對話方塊、根據選擇行Id獲取後端資料、將資料繫結到編輯檢視）
日期、字典、電話等欄位自定義顯示
外來鍵欄位格式化顯示（資料庫只儲存外來鍵Id）
人員欄位格式化顯示（資料庫只儲存人員外來鍵）
表格按鈕許可權控制
表頭分頁
是否換行顯示
自定義列顯示
多選行
表格擴充套件內容顯示

列表檢視屬性設定

屬性常規設定即為設定ant的table控制元件，其他一些擴充套件欄位如下：

tableDiv
設定a-table外層的div樣式，預設樣式為：'min-height: 560px'
rowKey
前端表格的行主鍵，一般情況為"id"，可以不設定，當查詢出來的列表資料主鍵不為id是，需要設定，如：id_a
tableType
自定義擴充套件欄位，多數情況不需要設定，如果是樹列表，需要設定為「tree」
columns
參見Table元件設定，定義表格列，特殊處理（寬度width不設定，預設定為80；對齊align不設定，預設定為center，擴充套件linked屬性，標識表格欄位可以點選，點選事件可接入規則引擎；擴充套件option_is屬性，標識欄位列可自定義是否顯示；擴充套件option_selected屬性，配合option_is使用，標識欄位列預設是否顯示）
columnsExpanded columnsExpandedColSpan
columnsExpanded表格展開更多內容欄位列定義，columnsExpandedColSpan定義展開顯示多少行，值為1-4，預設為4
colOperateWidth
定義列表操作列的寬度，當列表操作控制元件或者列表更多控制元件定義了，列表中的操作列才會顯示。
excelTemplate
匯入匯出Excel設定模版資訊，參見附錄【匯入匯出Excel模版】，如：[{"name":"電話","field":"phoneNumber","fieldType":5,"isRequred":true,"validateType":99,"validateValue":"[{'customerVal':'Phone','trigger':'blur'}]"},{"name":"學歷","field":"education","fieldType":5,"validateType":11}]
excelDicts
欄位字典對映集合資料，表示Excel中用到的資料字典對映資訊，定義哪個欄位用到哪個資料字典，如：[{"dict":"sex","field":"sex"},{"dict":"edu","field":"education"},{"dict":"title","field":"positionalTitle"}]
excelName
匯入匯出Excel檔名稱，如：人員管理測試Excel資料
uniqKey
匯入時唯一欄位檢測（這裡的欄位為資料庫欄位，注意不是轉換為駝峰命名之後的欄位，多個欄位組合用;號隔開），如：UserName。
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']}})，參考附錄：【自定義查詢條件】
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