scheme.md
2.8 KB
Scheme 方案
Scheme是一个数据驱动的解决方案,通过既定的业务配置参数,生成可模块化编辑的CURD业务视图
0f9815718a7fe28fdca27e20a3cd0ce969178292/examples/views/docs/scheme.md#">基础用法
配置项list中通过type可以配置任意组件,不受框架限制
:::snippet 使用list属性设置数据源,列表项中的type指定组件类型,每一项都已设置为el-form-item的子组件,通过rules配置校验规则
<template>
<eagle-scheme :list="schemeList">
<template #search-status="{ model }">
<eagle-select v-model="model.status" :dataSource="dataSource"></eagle-select>
</template>
<template #form-group-setting="{ label }">
<div style="padding: 10px 0px;border-bottom: 1px dashed #aaa;display: flex;justify-content: space-between;">
<span>哎哟 - {{ label }} - 不错哦</span>
<el-button size="mini" type="primary">这是一个按钮</el-button>
</div>
</template>
<template #form-item-status="{ model }">
<el-input-number v-model="model.status"></el-input-number>
</template>
<!-- 自定义按钮组 -->
<!-- <el-table-column slot="table-operation" prop="$operation" label="操作" min-width="140">
<el-tag>自定义按钮组</el-tag>
</el-table-column> -->
<!-- 在操作按钮组前加上新的按钮 -->
<!-- <template slot="table-operation-btn">
<el-button class="eagle-scheme__table-btn" type="text" title="启用">启用</el-button>
<el-button class="eagle-scheme__table-btn" type="text" title="禁用">禁用</el-button>
</template> -->
<!-- 在操作按钮组后追加新的按钮 -->
<!-- <template slot="table-operation-btn-append">
<el-button class="eagle-scheme__table-btn" type="text" title="启用">启用</el-button>
<el-button class="eagle-scheme__table-btn" type="text" title="禁用">禁用</el-button>
</template> -->
</eagle-scheme>
</template>
<script>
export default {
data() {
return {
schemeList: [
{ type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
{ type: 'el-input', key: 'code', label: '编码', rules: [{ required: true, message: '请输入编码' }],
exclude: 'search', group: { label: '设置', key: 'setting' }, tip: '编码为数字' },
{ type: 'el-input', key: 'type', label: '类型', group: { label: '设置', key: 'setting' }, tip: '类型随便填' },
{ type: 'el-input-number', key: 'sort', label: '排序', exclude: 'search' },
{ type: 'el-input', key: 'status', label: '状态' },
],
dataSource: [
{ label: '选项A', value: 'A' },
{ label: '选项B', value: 'B' },
]
}
},
}
</script>
:::
Attribute 属性
参数|说明|类型|可选值|默认值 -|-|-|-|- list | 表单项配置列表 | Array | - | []