scheme.md 1.59 KB

Scheme 方案

Scheme是一个数据驱动的解决方案,通过既定的业务配置参数,生成可模块化编辑的CURD业务视图

8374c330711df632e7c92309df33cd277f0ecc6c/examples/views/docs/component/scheme.md#">基础用法

配置一个数据项列表快速生成一个增删改查业务视图

::: snippet 使用list属性设置数据源,列表项中的type指定组件类型,其它包括FormDetailSearch组件的配置参数格式

<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 属性

参数|说明|类型|可选值|默认值 -|-|-|-|- value / v-model | 绑定值 | Array | - | [] list | 表单项配置列表 | Array | - | []