table.md
2.3 KB
Table 表格
根据JSON Scheme配置自动生成表格
fde264ccfd9cc0c35998ec937b634cc076f20cbf/examples/views/docs/component/table.md#">基础用法
配置list属性设置JSON Scheme配置列表
::: snippet tableProps设置表格参数
<template>
<z-table v-model="tableData" :list="list" :tableProps="{ border: true }"></z-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>
:::
fde264ccfd9cc0c35998ec937b634cc076f20cbf/examples/views/docs/component/table.md#">自定义渲染
配置list属性设置JSON Scheme配置列表
::: snippet render函数式渲染
<template>
<z-table v-model="tableData" :list="list"></z-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-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-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>
:::
API
Attribute 属性
参数|说明|类型|可选值|默认值 -|-|-|-|- value | 表格数据 | Array | - | - list | JSON Scheme配置项列表 | Array | - | [] tableProps | 表格参数 | Object | - | - tableEvents | 表格参数 | Object | - | - minWidth | 列宽 | Number | - | -
Events 事件
事件名称|说明|回调参数 -|-|- selection | 表格选中 | 选中项