scheme.md
1.58 KB
Scheme 方案
根据JSON Scheme配置自动生成一个包含搜索条件、表格、编辑表单、详情表单的页面
6ddd056df7183ffc6ced9a980e910416d4e237b4/examples/views/docs/component/scheme.md#">基础用法
通过配置JSON Scheme快速生成CURD逻辑
::: snippet 通过list配置项目
<template>
<z-scheme :list="list">
<template #header>
<el-tabs v-model="activeName">
<el-tab-pane label="待执行" name="wait"></el-tab-pane>
<el-tab-pane label="已执行" name="done"></el-tab-pane>
</el-tabs>
</template>
<template #button="{ size, openDialog }">
<el-button :size="size" plain>删除</el-button>
<el-button :size="size" plain @click="openDialog('other', '追加')">追加操作</el-button>
</template>
<template #dialog-other="{ model, closeDialog }">
<el-tag type="success">其它页面</el-tag>
<el-input
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="model.name">
</el-input>
<el-button @click="closeDialog(closeCallback)">关闭弹出框</el-button>
</template>
</z-scheme>
</template>
<script>
export default {
data() {
return {
activeName: 'wait',
list: [
{ type: 'el-input', label: '姓名', key: 'name', rules: [{ required: true, message: '请输入', trigger: 'change' }] },
{ type: 'el-input', label: '年龄', key: 'age' },
]
}
},
methods: {
closeCallback() {
alert('弹出框已关闭')
}
}
}
</script>
:::
API
Attribute 属性
参数|说明|类型|可选值|默认值 -|-|-|-|- list | JSON Scheme配置项列表 | Array | - | []