# Scheme Table 表格

根据JSON Scheme配置自动生成表格

## 基础用法

配置`list`属性设置JSON Scheme配置列表

::: snippet `tableProps`设置表格参数

```html
<template>
  <z-scheme-table v-model="tableData" :list="list" :tableProps="{ border: true }"></z-scheme-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 16 },
        { name: '李四', age: 24 }
      ],
      list: [
        { label: '姓名', key: 'name' },
        { label: '年龄', key: 'age', props: { 'controls-position': 'right' } },
      ]
    }
  } 
}
</script>
```

:::

## 自定义渲染

配置`list`属性设置JSON Scheme配置列表

<div class="code-snippet-box">

::: snippet `render`函数式渲染

```html
<template>
  <z-scheme-table v-model="tableData" :list="list"></z-scheme-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 16 },
        { name: '李四', age: 24 }
      ],
      list: [
        { label: '姓名', key: 'name', render: (h, { value }) => { return h('span', { style: { background: 'rgba(255, 0, 0, 0.5)', color: '#fff' } }, value) } },
        { label: '年龄', key: 'age', props: { 'controls-position': 'right' } },
      ]
    }
  } 
}
</script>
```

:::

::: snippet `slot`插槽式渲染

```html
<template>
  <z-scheme-table v-model="tableData" :list="list">
    <template #value-age="{ value }">
      <el-tag v-if="value" :type="value > 16 ? 'success' : 'danger'" size="mini" disable-transitions>{{ value }}</el-tag>
    </template>
  </z-scheme-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 16 },
        { name: '李四', age: 24 }
      ],
      list: [
        { type: 'el-input', label: '姓名', key: 'name' },
        { type: 'el-input-number', label: '年龄', key: 'age', props: { 'controls-position': 'right' } },
      ]
    }
  } 
}
</script>
```

:::

</div>

## 层级分组

支持`group`分组，兼容form组件，使同一个scheme能够同时复用在`table`、`form`上

::: snippet `group`设置分组，其中`key`设置分组对象名称

```html
<template>
  <z-scheme-table v-model="tableData" :list="list" :tableProps="{ border: true }"></z-scheme-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 16, location: { city: '上海', address: '青浦区' } },
        { name: '李四', age: 24, location: { city: '北京', address: '朝阳区' } }
      ],
      list: [
        { label: '姓名', key: 'name' },
        { label: '年龄', key: 'age', props: { 'controls-position': 'right' } },
        {
          group: { key: 'location' },
          list: [
            { label: '城市', key: 'city' },
          ]
        },
        { label: '地址', key: 'location.address' },
      ]
    }
  } 
}
</script>
```

:::

## API

## Attribute 属性

参数|说明|类型|可选值|默认值
-|-|-|-|-
value | 表格数据 | Array | - | -
list | JSON Scheme配置项列表 | Array | - | []
tableProps | 表格参数 | Object | - | -
tableEvents | 表格参数 | Object | - | -
minWidth | 列宽 | Number | - | -

## Events 事件

事件名称|说明|回调参数
-|-|-
selection | 表格选中 | 选中项