scheme.md 1.72 KB

Scheme 方案

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

6346896af071322255e3a497a9f9246251ce63c6/examples/views/docs/scheme.md#">基础用法

配置项list中通过type可以配置任意组件,不受框架限制

:::snippet 使用list属性设置数据源,列表项中的type指定组件类型,每一项都已设置为el-form-item的子组件,通过rules配置校验规则

<template>
  <eagle-scheme :list="schemeList">
    <!-- <el-table-column slot="table-append" prop="$operation" label="操作" min-width="140">
      <el-button class="eagle-scheme__table-btn" type="text" icon="el-icon-edit" title="编辑"></el-button>
      <eagle-confirm class="eagle-scheme__table-btn" title="是否删除?">
        <el-button type="text" icon="el-icon-delete" title="删除"></el-button>
      </eagle-confirm>
    </el-table-column> -->
    <template slot="table-append-btn">
      <el-button class="eagle-scheme__table-btn" type="text" icon="el-icon-view" 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' },
        { type: 'el-input', key: 'type', label: '类型' },
        { type: 'el-input-number', key: 'sort', label: '排序', exclude: 'search' },
        { type: 'el-input', key: 'status', label: '状态' },
      ]
    }
  },
}
</script>

:::

Attribute 属性

参数|说明|类型|可选值|默认值 -|-|-|-|- list | 表单项配置列表 | Array | - | []