# Scheme 方案

根据JSON Scheme配置自动生成一个包含搜索条件、表格、编辑表单、详情表单的页面

## 基础用法

通过配置`JSON Scheme`快速生成CURD逻辑

::: snippet 通过`list`配置项目

```html
<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 | - | []