This commit is contained in:
RickCole21 2020-10-19 09:37:34 +08:00
parent c611ca527a
commit a3c03e1b65

View File

@ -7,11 +7,14 @@ menuName: Json
icon:
order: 54
---
JSON 展示组件
## 基本用法
```schema:height="300"
可以配置 `value` 展示 `json` 格式数据
```schema:height="200"
{
"type": "page",
"body": {
@ -27,6 +30,108 @@ JSON 展示组件
}
```
## 获取数据链值
也可以通过配置 `source` 获取数据链中的值
```schema:height="200"
{
"type": "page",
"data":{
"json":{
"a": "a",
"b": {
"c": "c"
}
}
},
"body": {
"type": "json",
"source": "${json}"
}
}
```
## 用作 Field 时
当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时,可以设置`name`属性,映射同名变量
### Table 中的列类型
```schema:height="400" scope="body"
{
"type": "table",
"data": {
"items": [
{
"id": "1",
"json": {
"a": "a1",
"b": {
"c": "c1"
}
}
},
{
"id": "2",
"json": {
"a": "a2",
"b": {
"c": "c2"
}
}
},
{
"id": "3",
"json": {
"a": "a3",
"b": {
"c": "c3"
}
}
}
]
},
"columns": [
{
"name": "id",
"label": "Id"
},
{
"name": "json",
"label": "颜色",
"type": "json"
}
]
}
```
List 的内容、Card 卡片的内容配置同上
### Form 中静态展示
```schema:height="300" scope="body"
{
"type": "form",
"data": {
"json": {
"a": "a",
"b": {
"c": "c"
}
}
},
"controls": [
{
"type": "static-json",
"name": "json",
"label": "颜色"
}
]
}
```
## 主题
可配置`jsonTheme`,指定显示主题,可选`twilight`和`eighties`,默认为`twilight`。
@ -60,7 +165,6 @@ JSON 展示组件
]
```
## 配置默认展开层级
```schema:height="300"
@ -82,19 +186,15 @@ JSON 展示组件
如上,`levelExpand`配置为`0`,则默认不展开。
## 属性表
| 属性名 | 类型 | 默认值 | 说明 |
| ----------- | -------- | ---------- | ------------------------------------------------------------------------------------ |
| ----------- | --------- | ---------- | ------------------------------------------------------------------------------------ |
| type | `string` | | 如果在 Table、Card 和 List 中,为`"json"`;在 Form 中用作静态展示,为`"static-json"` |
| className | `string` | | 外层 CSS 类名 |
| value | `object` | | json 值 |
| source | `string` | `''` | 通过数据映射获取数据链中的值 |
| placeholder | `string` | `-` | 占位文本 |
| levelExpand | `number` | `1` | 默认展开的层级 |
| hideRoot | `boolean` | `false` | 是否隐藏根节点 |
| jsonTheme | `string` | `twilight` | 主题,可选`twilight`和`eighties` |