schema-table.md
3.27 KB
Schema Table 表格
根据JSON Schema配置自动生成表格
ef2583ca7276d10d21d3d36194ffc03684286993/examples/views/docs/component/schema-table.md#">基础用法
配置list属性设置JSON Schema配置列表
::: snippet tableProps设置表格参数
<template>
<z-schema-table v-model="tableData" :list="list" :tableProps="{ border: true }"></z-schema-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>
:::
ef2583ca7276d10d21d3d36194ffc03684286993/examples/views/docs/component/schema-table.md#">自定义渲染
配置list属性设置JSON Schema配置列表
::: snippet render函数式渲染
<template>
<z-schema-table v-model="tableData" :list="list"></z-schema-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插槽式渲染
<template>
<z-schema-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-schema-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>
:::
ef2583ca7276d10d21d3d36194ffc03684286993/examples/views/docs/component/schema-table.md#">层级分组
支持group分组，兼容form组件，使同一个schema能够同时复用在table、form上
::: snippet group设置分组，其中key设置分组对象名称
<template>
<z-schema-table v-model="tableData" :list="list" :tableProps="{ border: true }"></z-schema-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 Schema配置项列表 | Array | - | [] tableProps | 表格参数 | Object | - | - tableEvents | 表格参数 | Object | - | - minWidth | 列宽 | Number | - | -
Events 事件
事件名称|说明|回调参数 -|-|- selection | 表格选中 | 选中项