# XPageView

基于 JSON 配置动态构建页面的容器组件，具有高度的灵活性和可扩展性。

## 使用方法

```vue
<template>
  <x-page-view ref="pageView" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import XPageView from '@vue2-client/base-client/components/layout/XPageView'

const pageView = ref(null)

onMounted(() => {
  initView()
})

const initView = () => {
  pageView.value.init({
    configName: 'templateTreeConfig',
    serviceName: 'af-his'
  })
}
</script>
```

## API

### 属性

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| - | - | - | - |

### 方法

| 方法名 | 说明 | 参数 |
| --- | --- | --- |
| init | 初始化页面组件 | `{ configName, configValue, serviceName }` |

### 参数说明

| 参数名 | 说明 | 类型 | 必填 |
| --- | --- | --- | --- |
| configName | 配置名称，用于从服务端获取配置 | String | 二选一 |
| configValue | 配置的JSON数据，可以是字符串或对象 | String/Object | 二选一 |
| serviceName | 服务名称 | String | 是 |

## 结构化配置项

```json
{
  "children": [
    {
      "type": "row",
      "id": "row1",
      "gutter": 16,
      "template": "card",
      "children": [
        {
          "type": "XFormTable",
          "id": "table1",
          "span": 24,
          "props": { ... },
          "event": {
            "change": "function(val, data) { console.log(val) }"
          }
        }
      ]
    }
  ],
  "onMounted": "function(data) { console.log('页面已加载') }"
}
```

### row类型的属性

| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- |
| template | row的渲染模板类型 | String | card/none | card |

## 内部组件

### XPageRowTemplate

用于根据template属性决定是否使用卡片包装内容的组件。

#### 属性

| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- |
| template | 渲染模板类型 | String | card/none | card |
