# 表格布局
表格布局利用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": ""
}
}
```