Appearance
标准表格
应用包：lc-zkcomponents 类型：基础部件
一、效果预览
二、适用场景
适用于任一基础表格页面，部件举例实现了各种数据类型的实现方案，其应用了低代码平台本身集成的一些数值处理方法，可以方便地满足业务的展示值处理，同时应用了新的表头，可以方便地设置字段的排序、筛选功能
注意
表头的筛选和排序功能不再提供前端筛选能力，若需要点击排序、筛选时有效，需要考虑按照自定义表头组件的要求完成数据对接后方能看到效果。
三、代码示例
使用自定义表头管理筛选、排序条件，低代码页面示例如下，可复制到任一页面根节点json查看：
json
{
"version": "1.0",
"type": "div",
"title": "页面",
"id": "jjCjX1HB5nGaPTd-v9H0r",
"options": {
"style": {
"height": "100%"
}
},
"children": [
{
"type": "span",
"title": "文字",
"id": "d4QQl8lOzsuN9gPJJ0ia4",
"options": {
"domProps": {
"textContent": "v:sortBy + '===' + sortType + '====' + JSON.stringify(filter)"
}
},
"children": []
},
{
"type": "el-table",
"title": "表格",
"id": "dC1IpRwj_6oZs0QLPfpPy",
"options": {
"style": {
"minWidth": "200px"
},
"props": {
"height": "500px",
"border": false,
"fit": true,
"showHeader": true,
"showSummary": false,
"highlightCurrentRow": true,
"data": [
{
"productsClassification": "特色点心",
"addTime": "2021-10-14",
"editPerson": "孙思思",
"classification": "成功",
"status": "停用",
"prince": 120
},
{
"productsClassification": "特色水果",
"addTime": "2021-10-15",
"editPerson": "孙思思",
"classification": "无",
"status": "启用",
"prince": 150
},
{
"productsClassification": "特色农副业",
"addTime": "2021-10-14",
"editPerson": "孙思思",
"classification": "无",
"status": "停用",
"prince": 110
},
{
"productsClassification": "特色点心",
"addTime": "2021-10-14",
"editPerson": "孙思思",
"classification": "无",
"status": "启用",
"prince": 140
},
{
"productsClassification": "特色水果",
"addTime": "2021-10-14",
"editPerson": "孙思思",
"classification": "无",
"status": "停用",
"prince": 90
},
{
"productsClassification": "特色点心1",
"addTime": "2021-10-14",
"editPerson": "孙思思",
"classification": "无",
"status": "停用",
"prince": 80
},
{
"productsClassification": "特色农副业",
"addTime": "2021-10-14",
"editPerson": "孙思思",
"classification": "无",
"status": "启用",
"prince": 160
},
{
"productsClassification": "特色水果",
"addTime": "2021-10-14",
"editPerson": "孙思思",
"classification": "无",
"status": "停用",
"prince": 170
},
{
"productsClassification": "特色农副业",
"addTime": "2021-10-14",
"editPerson": "孙思思",
"classification": "无",
"status": "停用",
"prince": 123
},
{
"productsClassification": "特色点心",
"addTime": "2021-10-14",
"editPerson": "孙思思",
"classification": "无",
"status": "启用",
"prince": 96
},
{
"productsClassification": "特色水果",
"addTime": "2021-10-14",
"editPerson": "孙思思",
"classification": "无",
"status": "停用",
"prince": 111
},
{
"productsClassification": "特色点心",
"addTime": "2021-10-14",
"editPerson": "孙思思",
"classification": "无",
"status": "启用",
"prince": 120
},
{
"productsClassification": "特色农副业",
"addTime": "2021-10-14",
"editPerson": "孙思思",
"classification": "无",
"status": "停用",
"prince": 108
},
{
"productsClassification": "特色点心",
"addTime": "2021-10-14",
"editPerson": "孙思思",
"classification": "无",
"status": "启用",
"prince": 119
},
{
"productsClassification": "特色水果",
"addTime": "2021-10-14",
"editPerson": "孙思思",
"classification": "无",
"status": "停用",
"prince": 176
}
],
"header-cell-style": {
"height": "60px",
"background": "#E0EAFF",
"fontSize": "14px",
"color": "#333333",
"fontWeight": "normal",
"font-family": "Source Han Sans CN"
},
"cell-style": {
"height": "48px",
"fontSize": "14px",
"color": "#333333",
"fontWeight": "normal",
"font-family": "Source Han Sans CN"
},
"stripe": true,
"unit": "%",
"accuracy": 0,
"selectTime": "yyyy-mm-dd",
"dataType": "base",
"formatter": ""
}
},
"children": [
{
"type": "el-table-column",
"id": "57iT0kuQ2ybuSdHrEqvHt",
"setter": "table-template-import-column-setter",
"options": {
"props": {
"type": "selection",
"width": "60",
"fixed": "left",
"align": "center"
},
"style": {
"fontSize": "16px"
}
},
"title": "多选框",
"children": []
},
{
"type": "el-table-column",
"setter": "table-template-import-column-setter",
"id": "GkuKSiC4AlO481qUvOVbj",
"options": {
"props": {
"type": "index",
"index": "f:d=>d+1",
"label": "序号",
"width": "60"
},
"style": {}
},
"title": "序号",
"children": [
{
"type": "UIBlock",
"options": {
"props": {
"code": "custom-table-head-base",
"namespace": "app/lc-zkcomponents"
},
"attrs": {
"scope": "v:scope"
},
"style": {},
"slot": "header",
"slotScope": "scope"
},
"id": "y6cNFDF06gbOrtqjsk4Wn",
"events": []
}
]
},
{
"type": "el-table-column",
"id": "QRFhCb7iGHhSEkozRuoDz",
"setter": "table-template-import-column-setter",
"options": {
"props": {
"prop": "productsClassification",
"label": "物产分类",
"min-width": 100,
"width": null,
"accuracy": "",
"unit": "",
"formatter": ""
}
},
"title": "物产分类",
"children": [
{
"type": "UIBlock",
"options": {
"props": {
"code": "custom-table-head-base",
"namespace": "app/lc-zkcomponents"
},
"attrs": {
"scope": "v:scope",
"sortable": true,
"sortType": "v:sortBy==='productsClassification' ? sortType : null"
},
"style": {},
"slot": "header",
"slotScope": "scope"
},
"id": "gsEeNQN1idK8ATTbUqAeK",
"events": [
{
"modifiers": [],
"name": "clickItem",
"handler": "f:function(event){\n this.updateSort('productsClassification')\n}"
}
]
}
]
},
{
"type": "el-table-column",
"id": "eKV6QPCsn-WTtvQBU-Rji",
"setter": "table-template-import-column-setter",
"options": {
"props": {
"prop": "addTime",
"label": "形成时间",
"min-width": 160,
"formatter": "f:(a,b,c)=>{var fmt = 'yyyy.MM.dd';var t = new Date(c);var o = {'M+': t.getMonth() + 1,'d+': t.getDate(),'h+': t.getHours(),'m+': t.getMinutes(),'s+': t.getSeconds(),'q+': Math.floor((t.getMonth() + 3) / 3),'S': t.getMilliseconds()};if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (t.getFullYear() + '').substr(4 - RegExp.$1.length));for (var k in o){if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));}return fmt;}",
"selectTime": "yyyy.MM.dd",
"dataType": "time"
}
},
"title": "形成时间",
"children": [
{
"type": "UIBlock",
"options": {
"props": {
"code": "custom-table-head-base",
"namespace": "app/lc-zkcomponents"
},
"attrs": {
"scope": "v:scope",
"sortable": true,
"sortType": "v:sortBy==='addTime' ? sortType : null"
},
"style": {},
"slot": "header",
"slotScope": "scope"
},
"id": "H4ioMbRZkj2BX9ot2_a6L",
"events": [
{
"modifiers": [],
"name": "clickItem",
"handler": "f:function(event){\n this.updateSort('addTime')\n}"
}
]
}
]
},
{
"type": "el-table-column",
"id": "ufrhJfgTANIwdes-9hPNY",
"setter": "table-template-import-column-setter",
"options": {
"props": {
"prop": "editPerson",
"label": "投稿人",
"min-width": 160,
"accuracy": "",
"unit": "",
"formatter": ""
}
},
"title": "投稿人",
"formatter": "",
"children": [
{
"type": "UIBlock",
"options": {
"props": {
"code": "custom-table-head-base",
"namespace": "app/lc-zkcomponents"
},
"attrs": {
"scope": "v:scope"
},
"style": {},
"slot": "header",
"slotScope": "scope"
},
"id": "Sdmw1HgCvL3M0znnjdAqQ",
"events": []
}
]
},
{
"type": "el-table-column",
"id": "jsM3-S6nO2bF14hzAIh_9",
"setter": "table-template-import-column-setter",
"options": {
"props": {
"prop": "classification",
"label": "分类",
"min-width": 100,
"sortable": false
}
},
"title": "分类",
"children": [
{
"type": "UIBlock",
"options": {
"props": {
"code": "custom-table-head-base",
"namespace": "app/lc-zkcomponents"
},
"attrs": {
"scope": "v:scope",
"filterType": "checkbox",
"filterOptions": [
{
"value": "启用",
"text": "启用"
},
{
"value": "停用",
"text": "停用"
}
]
},
"style": {},
"slot": "header",
"slotScope": "scope"
},
"id": "zptpVgS4NG19VyItLdBR0",
"events": [
{
"modifiers": [],
"name": "filterUpdate",
"handler": "f:function(e){\n this.updateFilter('classification', e)\n}"
}
]
}
]
},
{
"type": "el-table-column",
"id": "fG0CS0Se7BeoEeHn0nPgY",
"setter": "table-template-import-column-setter",
"options": {
"props": {
"prop": "status",
"label": "状态",
"min-width": 100,
"accuracy": "",
"unit": "",
"formatter": ""
}
},
"title": "状态",
"children": [
{
"type": "UIBlock",
"options": {
"props": {
"code": "custom-table-head-base",
"namespace": "app/lc-zkcomponents"
},
"attrs": {
"scope": "v:scope"
},
"style": {},
"slot": "header",
"slotScope": "scope"
},
"id": "iXTyR9o__VmZ1k9r1yEKn",
"events": []
}
]
},
{
"type": "el-table-column",
"id": "deN8jIq1AB9vYBUAaRP6n",
"setter": "table-template-import-column-setter",
"options": {
"props": {
"prop": "prince",
"label": "价格",
"min-width": 100,
"align": "right",
"width": 100,
"formatter": "f:(a,b,c)=>{if(Number.isNaN(Number(c)) || c===null || c === undefined || c === '') return '-';var jd = 2;var unit = '￥';var integer = String(c).split('.')[0];var decimal = c % 1;if(decimal.toFixed(jd) >= 1) integer -= -1;if(jd === 0) decimal = '';else decimal = decimal.toFixed(jd).split('.')[1];integer = String(integer).replace(new RegExp(`\\d{1,${3}}(?=(\\d{${3}})+$)`, 'g'), '$&,').split(',').join(',');return [integer, decimal].join(decimal ? '.' : '') + unit;}",
"accuracy": "2",
"unit": "￥",
"dataType": "number"
}
},
"title": "价格",
"formatter": "",
"children": [
{
"type": "UIBlock",
"options": {
"props": {
"code": "custom-table-head-base",
"namespace": "app/lc-zkcomponents"
},
"attrs": {
"scope": "v:scope"
},
"style": {},
"slot": "header",
"slotScope": "scope"
},
"id": "gLJx1NjoKw9yYhFI354NU",
"events": []
}
]
}
],
"group": true,
"events": [],
"definition": "// 模型定义规范与Vue组件定义相同\n{\n data(){\n return {\n // 此处定义模型变量\n \n }\n }\n}\n",
"setter": "table-template-import-setter"
}
],
"definition": "// 模型定义规范与Vue组件定义相同\n{\n data(){\n return {\n sortBy: null,\n sortType: null,\n filter: [],\n filterObj: {}\n }\n },\n methods:{\n // 更新排序\n updateSort(prop){\n if(this.sortBy !== prop){\n this.sortBy = prop;\n this.sortType = 'asc'\n }else{\n if(this.sortType === null){\n this.sortType = 'asc'\n }else if(this.sortType === 'asc'){\n this.sortType = 'desc'\n }else{\n this.sortBy = null;\n this.sortType = null\n }\n }\n },\n // 更新筛选\n updateFilter(prop, value){\n if(value.length && value.some(d=>d!==null)){\n this.filterObj[prop] = value;\n }else{\n delete this.filterObj[prop]\n }\n let temp = []\n for(let prop in this.filterObj){\n temp.push({prop, value: this.filterObj[prop]})\n }\n this.filter = temp\n }\n },\n}\n"
}