字段属性配置项

字段配置的属性，可以通过 setOptions 方法进行动态修改。

this.$refs.generateForm.setOptions(['fieldId'], {
  required: false,
  total: 100
})

公共属性

options: {
  customClass: '', // 自定义样式
  isLabelWidth: false, // 是否展示标签
  labelWidth: 100, // 标签宽度，isLabelWidth 为 true 时生效
  hidden: false, // 隐藏属性
  disabled: false, // 是否禁用
  dataBind: true, // 数据绑定属性
  required: false, // 是否必填
  width: 100, // 宽度
}

特有属性

单行文本

{
  type: 'input',
  options: {
    dataType: '', // 数据类型
    dataTypeCheck: false, // 是否启用数据类型验证
    dataTypeMessage: '', // 数据类型验证错误信息
    pattern: '', // 正则表达式
    patternCheck: false, // 是否启用正则表达式验证
    patternMessage: '', // 正则表达式验证错误信息
    placeholder: '', // 占位内容
    showPassword: false, // 显示密码
    clearable: false, // 是否可清除
    maxlength: '', // 最大输入长度
    showWordLimit: false, // 是否显示输入长度
  }
}

多行文本

{
  type: 'textarea',
  options: {
    pattern: '', // 正则表达式
    patternMessage: '', // 正则表达式验证错误信息
    placeholder: '', // 占位内容
    maxlength: '', // 最大输入长度
    showWordLimit: false, // 是否显示输入长度
    rows: 2, // 输入框行数
    autosize: false // 高度是否自适应
  }
}

计数器

{
  type: 'number',
  options: {
    defaultValue: 0,
    min: 0, // 最小值
    max: 9, // 最大值
    step: 1, // 步长
    controls: true, // 是否使用控制按钮
    controlsPosition: '', // 控制按钮位置
    precision: 0, // 精度
  }
}

单选框组

{
  type: 'radio',
  options: {
    inline: false, // 布局方式，是否行内
    showLabel: false, // 是否显示选项标签
    options: [], // 静态选项
    remote: false, // 是否是动态数据
    remoteType: 'datasource', // 动态数据类型
    remoteOption: '', // 动态数据为赋值变量的变量名称
    remoteFunc: '', // 动态数据为方法函数的函数名称
    props: {
      value: 'value', // 动态数据选项值配置
      label: 'label' // 动态数据选项标签配置
    },
  }
}

多选框组

{
    type: 'checkbox',
    options: {
      inline: false, // 布局方式，是否行内
      showLabel: false, // 是否显示选项标签
      options: [], // 静态选项
      remote: false, // 是否是动态数据
      remoteType: 'datasource', // 动态数据类型
      remoteOption: '', // 动态数据为赋值变量的变量名称
      remoteFunc: '', // 动态数据为方法函数的函数名称
      props: {
        value: 'value', // 动态数据选项值配置
        label: 'label' // 动态数据选项标签配置
      },
    }
  }

下拉选择框

{
  type: 'select',
  options: {
    multiple: false, // 是否多选
    clearable: false, // 是否可清除
    placeholder: '', // 占位内容
    filterable: false, // 是否可搜索
    showLabel: false, // 是否显示选项标签
    options: [], // 静态选项
    remote: false, // 是否是动态数据
    remoteType: 'datasource', // 动态数据类型
    remoteOption: '', // 动态数据为赋值变量的变量名称
    remoteFunc: '', // 动态数据为方法函数的函数名称
    props: {
      value: 'value', // 动态数据选项值配置
      label: 'label' // 动态数据选项标签配置
    },
  }
}

时间选择器

{
  type: 'time',
  options: {
    readonly: false, // 是否只读
    editable: true, // 文本框是否可输入
    clearable: true, // 是否可以清除
    placeholder: '', // 占位内容
    startPlaceholder: '', // 占位内容，在 isRange 为 true 时生效
    endPlaceholder: '', // 占位内容，在 isRange 为 true 时生效
    isRange: false, // 是否范围选择
    arrowControl: false, // 是否使用箭头进行时间选择
    format: 'HH:mm:ss' // 时间格式
  }
}

日期选择器

{
  type: 'date',
  options: {
    readonly: false, // 是否只读
    editable: true, // 文本框是否可输入
    clearable: true, // 是否可以清除
    startPlaceholder: '', // 占位内容，在 type = daterange | datetimerange 时生效
    endPlaceholder: '', // 占位内容，在 type = daterange | datetimerange 时生效
    type: 'date', // 日期选择器类型，year|month|date|dates|datetime|daterange|datetimerange
    format: 'YYYY-MM-DD', // 日期格式
    timestamp: false // 是否获取时间戳
  }
}

评分

{
  type: 'rate',
  options: {
    max: 5, // 最大值
    allowHalf: false, // 是否允许半选
    showScore: false, // 是否显示分数
  }
}

颜色选择器

{
  type: 'color',
  options: {
    showAlpha: false, // 支持透明度选择
  }
}

开关

无

滑块

{
  type: 'slider',
  options: {
    min: 0, // 最小值
    max: 100, // 最大值
    step: 1, // 步长
    showInput: false, // 是否显示输入框
  }
}

文字

无

HTML

无

按钮

{
  type: 'button',
  options: {
    buttonType: '', // 按钮类型
    buttonPlain: false, // 朴素按钮
    buttonRound: false, // 圆角按钮
    buttonCircle: false, // 圆形按钮
    buttonName: 'Button', // 按钮文本
  }
}

文字链接

{
  type: 'link',
  options: {
    linkType: 'default', // 链接类型
    linkName: 'Link', // 链接文本
    underline: true, // 是否有下划线
    blank: true, // 是否在新窗口中打开
    href: '', // 链接地址
  }
}

级联选择器/树选择

{
  type: 'cascader',
  options: {
    placeholder: '', // 占位内容
    clearable: false, // 是否显示清除按钮
    options: [], // 静态选项
    remote: false, // 是否是动态数据
    remoteType: 'datasource', // 动态数据类型
    remoteOption: '', // 动态数据为赋值变量的变量名称
    remoteFunc: '', // 动态数据为方法函数的函数名称
    props: {
      value: 'value', // 动态数据选项值配置
      label: 'label' // 动态数据选项标签配置
    },
    multiple: false, // 多选
    filterable: false, // 可搜索
    checkStrictly: false // 可选任意节点
  }
}

步骤条

{
  type: 'steps',
  options: {
    steps: [], // 步骤选项静态数据
    props: {
      title: 'title', // 动态数据选项title
      description: 'description' // 动态数据选项description
    },
    remote: false, // 是否使用动态数据（数据源）
    direction: 'horizontal', // 显示方向
    processStatus: 'process', // 当前步骤的状态
    finishStatus: 'finish', // 结束步骤状态
    alignCenter: false, // 居中对齐
    simple: false, // 简洁风格
    space: '' // Step间距
  }
}

穿梭框

{
  type: 'transfer',
  options: {
    data: [], // 穿梭框选项静态数据
    props: { 
      key: 'key', // 穿梭框动态选项绑定key
      label: 'label', // 穿梭框动态选项绑定label
      disabled: 'disabled' // 穿梭框动态选项绑定disabled
    },
    filterable: false, // 是否可搜索
    remote: false, // 选项是否动态数据（数据源）
    titles: ['Source', 'Target'] // 列表标题
  }
}

分页

{
  type: 'pagination',
  options: {
    background: true, // 按钮背景色
    pageSize: 10, // 每页显示数目
    pagerCount: 7, // 页码按钮数量
    total: 100, // 总条目数
  }
}

自定义区域

{
  type: 'blank',
  options: {
    defaultType: 'String', // 绑定数据类型
  }
}

自定义组件

{
  type: 'component',
  options: {
    template: '<div>自定义内容</div>', // 自定义模板
  }
}

文件

{
  type: 'fileupload',
  options: {
    domain: 'https://tcdn.form.making.link/', // 七牛配置domain，当 isQiniu=true 时生效
    tip: '', // 提示信息
    action: 'https://tools-server.making.link/api/transfer', // 上传地址，当 isQiniu=false 时生效
    limit: 9, // 最大上传数
    multiple: false, // 是否可以文件多选
    isQiniu: false, // 是否使用七牛上传
    headers: [], // 请求头部配置，当 isQiniu=false 时生效
    withCredentials: false // 跨域请求是否提供凭据信息，当 isQiniu=false 时生效
  }
}

图片

{
  type: 'imgupload', 
  options: {
    size: {
      width: 100, // 上传框宽度
      height: 100, // 上传框高度
    },
    domain: 'https://tcdn.form.making.link/', // 七牛配置domain，当 isQiniu=true 时生效
    readonly: false, // 是否只读
    limit: 8, // 最大上传数
    multiple: false, // 是否可以文件多选
    isQiniu: false, // 是否使用七牛上传
    isDelete: true, // 是否可删除
    min: 0, // 最小上传数
    isEdit: true, // 是否可编辑
    action: 'https://tools-server.making.link/api/transfer', // 上传地址，当 isQiniu=false 时生效
    headers: [], // 请求头部配置，当 isQiniu=false 时生效
    withCredentials: false // 跨域请求是否提供凭据信息，当 isQiniu=false 时生效
  }
}

编辑器

{
  type: 'editor',
  options: {
    customToolbar: [
      [ 'bold', 'italic', 'underline', 'strike', 
        { 'color': [] }, 
        { 'background': [] }, 
        { 'align': [] },
        { 'list': 'ordered'}, 
        { 'list': 'bullet' },
        { 'indent': '-1'}, 
        { 'indent': '+1' }
      ], 
      [{ 'font': [] },{ 'header': [1, 2, 3, 4, 5, 6, false] }],               
      [{ 'script': 'sub'}, { 'script': 'super' }],  
      ['link', 'image','blockquote', 'code-block'],
      [{ 'direction': 'rtl' }], 
      ['clean'] 
    ], // 富文本工具栏配置
  }
}

子表单/子表单+

{
  type: 'table',
  options: {
    paging: false, // 是否分页
    pageSize: 5, // 每页显示条数
    isAdd: true, // 是否可新增行
    isDelete: true, // 是否可删除行
    showControl: true, // 展示控制按钮
  }
}

对话框

{
  type: 'dialog',
  options: {
    visible: false, // 显示对话框
    title: 'Dialog Title', // 标题
    top: '15vh', // 顶部距离
    center: false, // 居中
    cancelText: 'Cancel', //取消按钮文字
    showClose: true, // 显示关闭按钮
    okText: 'Confirm', // 确认按钮文字
    showCancel: true, // 是否显示取消按钮
    showOk: true, // 是否显示确认按钮
    confirmLoading: false // 确认按钮Loading效果
  }
}

分组

无