组件配置规范

31 阅读2分钟

一.组件参数说明

  • field: 组件key值/字段
  • value: 组件值
  • type: 组件类型 (input,select,radio,switch,pipeline自定义组件)
  • title: 表单行label值
  • props:

    • 支持mtd组件所有基础属性
    • 参数:Object
  • event:

    • 组件事件配置
    • 参数 Object
  • validate:

    • 组件验证规则配置
    • 参数 Array
  • options:

    • 部分组件option选择项配置
    • 参数 Array
  • className:

    • 参数: Object | Array | string
    • 自定义组件的样式
  • col

    • 组建栅格布局
    • Object

二. 组件实例

  • input组件

  • props支持参数(支持全部mtd组件Attributes中属性,选择重要配置项说明)

    参数说明类型可选值默认值
    size选择框尺寸stringsmall、normal、largenormal
    clearable是否有清空按钮booleantrue、falsefalse
    disabled是否禁用booleanfalse
    readonly只读boolean
    {
    	field:'', // 组件绑定key值
    	title:'',// 组件lable值
    	value:'',// 组件value值
      type:'input', 
      props:{ // 可配置mtd组件上全部属性
      	disabled:true / false
      },
      validate:[{type: "string", required: fasle, pattern: ".*"}] // 校验规则,
    }
    
  • select组件

  • 注意:value为select 当前选中值, 多选时为数组。注意value的数据格式应与options中value格式相同,不能出现‘123‘和123此类的数据

参数说明类型可选值默认值
size选择框尺寸stringsmall、normal、largenormal
clearable是否有清空按钮booleantrue、falsefalse
disabled是否禁用booleanfalse
readonly只读boolean
multiple多选booleanfalse
clearable清空boolean
show-checkbox多选是否展示 Checkbox,仅当设置 multiple 属性时生效boolean
{
    type: "select",
    field: "cate_id",
    title: "产品分类",
    value: '',
    api: {
    url: '',
    methods:'' // get post 
    },// 代理前缀及地址不需要返回
    options: [
        {"value": "104", "label": "生态蔬菜", "disabled": false},
        {"value": "105", "label": "新鲜水果", "disabled": false},
     ],
    props: {
        filterable: false, // 是否可搜索
        remote-method:'',// 默认搜索必须远程,绑定方法,本地实现,非模糊查询时为空即可
        clearable:false, // 是否可清空
    },
      validate:[{type: "string", required: fasle, pattern: ".*"}] // 校验规则,
}
  • radio

    {
        type:"notifier",
        title:"添加通知人",
        field:"is_postage",
        value:[{name:'abc',mis:'abc01'}], // value为数组,分为name和mis两项
          validate:[{type: "string", required: fasle, pattern: ".*"}] // 校验规则
    }
    
  1. 页面可视化搭建工具技术要点
  2. 页面可视化搭建工具技术要点
  3. 面可视化搭建工具前生今世
  4. 页面可视化搭建工具前生今世
  5. page-pipepline
  6. vue-form-making
  7. vue-form-generator
  8. 飞冰
  9. 云凤蝶
  10. Vue+ElementUI实现表单动态渲染、可视化配置的方法
  11. form-create V2
  12. X-Page-Editor-Vue
  13. vue-page-designer
  14. Vue-Layout
  15. Uform