# 表格布局
表格布局利用html中table進行布局配置。效果如下：
## 屬性
屬性配置中主要包含：
1、 樣式style
配置table的樣式style
2、 樣式class
配置table的樣式class
3、 邊框開關
是否打開表格的邊框
4、 hover點亮開關
打開此開關后，鼠標移動到一行的時候，會有高亮效果。
5、 緊湊開關
6、 是否隱藏開關
## 格式
表格屬性中實際配置的屬性結構如下
```
{
"type": "table",
"layout": true,
"trs": [
{
tds: [
{
"colspan": 1,
"rowspan": 1,
"list": [
... 這里就是各個基礎要素
]
}
]
},
{
... 每行數據
}
]
}
```
## 配置
在表格的配置面板中可以對表格進行行、列的添加； 行、列的合并、刪除；單元格的樣式。
### 行、列新增
### 樣式配置
通過在表格的單元格上點擊右鍵，選擇“樣式配置”，在彈出的對話框中可以輸入當前選中單元格的樣式。
### 完整示例
```
{
"list": [
{
"type": "table",
"layout": true,
"options": {
"customStyle": "",
"customClass": "",
"bordered": true,
"bright": true,
"small": false,
"hidden": false
},
"label": "表格布局",
"labelWidth": 0,
"width": "100%",
"span": 24,
"key": "table_1679625396463",
"model": "table_1679625396463",
"trs": [
{
"tds": [
{
"colspan": 1,
"rowspan": 1,
"list": [
{
"type": "text",
"options": {
"textAlign": "center",
"showRequiredMark": false,
"showRequiredMarkScript": "",
"hidden": false,
"disabled": false
},
"label": "姓名",
"labelWidth": 0,
"width": "100%",
"span": 24,
"key": "text_1679625489521",
"model": "text_1679625489521"
}
],
"style": "width: 10%; background: rgb(242, 247, 254); font-size: 14px; font-weight: bolder;"
},
{
"colspan": 1,
"rowspan": 1,
"list": [
{
"type": "input",
"options": {
"defaultValue": "",
"prepend": "",
"append": "",
"placeholder": "請輸入",
"maxLength": 0,
"clearable": false,
"hidden": false,
"disabled": false
},
"label": "輸入框",
"labelWidth": -1,
"width": "100%",
"span": 24,
"model": "input_1679625496642",
"key": "input_1679625496642",
"rules": [
{
"required": false,
"message": "必填項",
"trigger": [
"blur"
]
}
]
}
]
},
{
"colspan": 1,
"rowspan": 1,
"list": [
{
"type": "text",
"options": {
"textAlign": "center",
"showRequiredMark": false,
"showRequiredMarkScript": "",
"hidden": false,
"disabled": false
},
"label": "性別",
"labelWidth": 0,
"width": "100%",
"span": 24,
"key": "text_1679625506758",
"model": "text_1679625506758"
}
],
"style": "width: 10%; background: rgb(242, 247, 254); font-size: 14px; font-weight: bolder;"
},
{
"colspan": 1,
"rowspan": 1,
"list": [
{
"type": "radio",
"options": {
"defaultValue": "",
"placeholder": "請輸入",
"dynamic": 2,
"options": [
{
"value": "1",
"label": "選項1"
},
{
"value": "2",
"label": "選項2"
}
],
"remoteFunc": "",
"dataPath": "",
"remoteValue": "",
"remoteLabel": "",
"dictType": "sex",
"hidden": false,
"disabled": false,
"linkage": false,
"linkData": []
},
"label": "性別",
"labelWidth": -1,
"width": "100%",
"span": 24,
"model": "sex",
"key": "radio_1679625516027",
"rules": [
{
"required": false,
"message": "必填項",
"trigger": [
"blur"
]
}
]
}
]
}
]
},
{
"tds": [
{
"colspan": 1,
"rowspan": 1,
"list": [
{
"type": "text",
"options": {
"textAlign": "center",
"showRequiredMark": false,
"showRequiredMarkScript": "",
"hidden": false,
"disabled": false
},
"label": "年齡",
"labelWidth": 0,
"width": "100%",
"span": 24,
"key": "text_1679625577117",
"model": "text_1679625577117"
}
],
"style": "width: 10%; background: rgb(242, 247, 254); font-size: 14px; font-weight: bolder;"
},
{
"colspan": 1,
"rowspan": 1,
"list": [
{
"type": "number",
"options": {
"precision": 0,
"step": 1,
"min": 0,
"max": 1000,
"defaultValue": 0,
"append": "",
"placeholder": "請輸入",
"clearable": false,
"hidden": false,
"disabled": false
},
"label": "數字輸入框",
"labelWidth": -1,
"width": "100%",
"span": 24,
"model": "number_1679625583401",
"key": "number_1679625583401",
"rules": [
{
"required": false,
"message": "必填項",
"trigger": [
"blur"
]
}
]
}
]
},
{
"colspan": 1,
"rowspan": 1,
"list": [
{
"type": "text",
"options": {
"textAlign": "center",
"showRequiredMark": false,
"showRequiredMarkScript": "",
"hidden": false,
"disabled": false
},
"label": "籍貫",
"labelWidth": 0,
"width": "100%",
"span": 24,
"key": "text_1679625610194",
"model": "text_1679625610194"
}
],
"style": "width: 10%; background: rgb(242, 247, 254); font-size: 14px; font-weight: bolder;"
},
{
"colspan": 1,
"rowspan": 1,
"list": [
{
"type": "input",
"options": {
"defaultValue": "",
"prepend": "",
"append": "",
"placeholder": "請輸入",
"maxLength": 0,
"clearable": false,
"hidden": false,
"disabled": false
},
"label": "輸入框",
"labelWidth": -1,
"width": "100%",
"span": 24,
"model": "input_1679625583401",
"key": "input_1679625583401",
"rules": [
{
"required": false,
"message": "必填項",
"trigger": [
"blur"
]
}
]
}
]
}
]
},
{
"tds": [
{
"colspan": 1,
"rowspan": 1,
"list": [
{
"type": "text",
"options": {
"textAlign": "center",
"showRequiredMark": false,
"showRequiredMarkScript": "",
"hidden": false,
"disabled": false
},
"label": "地址",
"labelWidth": 0,
"width": "100%",
"span": 24,
"key": "text_1679625557914",
"model": "text_1679625557914"
}
],
"style": "width: 10%; background: rgb(242, 247, 254); font-size: 14px; font-weight: bolder;"
},
{
"colspan": 3,
"rowspan": 1,
"list": [
{
"type": "textarea",
"options": {
"defaultValue": "",
"rows": 4,
"placeholder": "請輸入",
"maxLength": 0,
"clearable": false,
"autosize": false,
"hidden": false,
"disabled": false
},
"label": "文本框",
"labelWidth": -1,
"width": "100%",
"span": 24,
"model": "address",
"key": "textarea_1679625565407",
"rules": [
{
"required": false,
"message": "必填項",
"trigger": [
"blur"
]
}
]
}
]
}
]
}
]
}
],
"config": {
"labelPosition": "left",
"labelWidth": 0,
"size": "mini",
"outputHidden": true,
"hideRequiredMark": false,
"syncLabelRequired": false,
"customStyle": ""
}
}
```