scheme.md
1.56 KB
Scheme 方案
Scheme是一个数据驱动的解决方案，通过既定的业务配置参数，生成可模块化编辑的CURD业务视图
7a06b45808c9f6c37ae2159b6ea5ff7e4bf6973e/examples/views/docs/component/scheme.md#">基础用法
配置项list中通过type可以配置任意组件，不受框架限制
::: snippet 使用list属性设置数据源，列表项中的type指定组件类型，每一项都已设置为el-form-item的子组件，通过rules配置校验规则
<template>
<eagle-scheme v-model="tableData" :list="schemeList"></eagle-scheme>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '产品A', code: 'P0001', type: 'NORMAL', sort: 0, status: '0' },
{ name: '产品B', code: 'P0002', type: 'BROKEN', sort: 1, status: '1' },
{ name: '产品C', code: 'P0003', type: 'NORMAL', sort: 0, status: '0' },
{ name: '产品D', code: 'P0004', type: 'BROKEN', sort: 1, status: '1' },
],
schemeList: [
{ type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
{ type: 'el-input', key: 'code', label: '编码', rules: [{ required: true, message: '请输入编码' }], exclude: 'search' },
{ type: 'el-input', key: 'type', label: '类型' },
{ type: 'el-input-number', key: 'sort', label: '排序', include: ['form', 'table'], sortable: true },
{ type: 'el-input', key: 'status', label: '状态' },
],
}
},
}
</script>
:::
API
Attribute 属性
参数|说明|类型|可选值|默认值 -|-|-|-|- list | 表单项配置列表 | Array | - | []