props

概述

当基础字段不够描述组件的展示时,使用 props 字段作为扩展。props 的具体属性可以查询 antd 的组件文档。所有 props 中的属性都会直接透传给组件,所以理论上 FormRenderVue 支持所有 antd 组件库支持的展示,例如

  url: {
    title: "网址",
    type: "string",
    props: {
      prefix: 'https://',
      suffix: '.com'
    }
  }

内置组件 props

一些内置的 widget 组件是由多个(或者复杂结构的)自然组件组成的,此时我们为每个自然组件开了一个 props 入口,例如 list 组件有 props 和 itemProps 两个属性,支持用户对 list 本身以及每个 item 的定制化展示 & 功能需求。所有内置的 props 见下面列表

list 列表

props

props类型说明
hideTitleboolean只支持“simpleList”,隐藏 title,展示更紧凑
hideDeleteboolean隐藏删除按钮
hideAddboolean隐藏新增/复制按钮
hideCopyboolean隐藏复制按钮
hideMoveboolean隐藏上下移动 item 的按钮
buttonsarray下详 (注 1)

注:对于展示是 table 类型的 list(tableList、drawerList、virtualList),所有 antd table 支持的 props 都可以透传,例如

"props": {
  "scrollX": 2000
}

itemProps

props类型说明
buttonsarray下详 (注 2)
addBtnPropsarray“新增一条”按钮的样式和文案修改,所有 antd 的 button 的 props 都支持传入,例如 addBtnProps: {children: '新增企业', type: 'primary'}

注:对于展示是 table 类型的 list(tableList、drawerList、virtualList),所有 columns 的单个配置都可以透传,会作用到 clumns 的所有 item,例如

"itemProps": {
  "width": 200
}

则 table 的所有单元格(除了“操作”那一列)都会宽度 200 px

注 1:

列表默认只展示“新增一条”按钮。buttons 用于添加更多列表操作按钮

"arrDemo": {
  ...
  "props": {
    "buttons": [
      {
        "html": "Excel导入",
        "callback": "someCallback"
      }
    ]
  }
}
  1. FormRenderVue 会到 window.someCallback 上寻找回调函数,此回调函数可接受参数 valueschema。返回值会作为新的列表值
  2. html 字段可使用正常的 string 值,或者任何 html 片段,例如
"arrDemo": {
  ...
  "props": {
    "buttons": [
      {
        "html": "<span style='color: red'>拉取数据</span>",
        "callback": "someCallback"
      }
    ]
  }
}
// value: 整个数组的值,onChange: 传入改变后的数组值,触发state更新
// 使用Object入参,为了将来好扩展
window.someCallback = ({ value, onChange, schema }) => {
  onChange([...value, { a: 'hello' }]);
};

如上的 someCallback 会在原有的 list 值基础上添加一个新的 item: { a: 'hello' }

注 2:

itemProps.buttons 用于扩展列表里每个 item 的更多操作

注:itemProps.buttons 目前还未在代码层面实现。主要原因在于 itemProps.buttons 在不同展示下可能是 icon,而 form-render 并不想引入整个@ant-design/icons,大家有好的想法欢迎钉钉群讨论,或者使用 issue/feature

"arrDemo": {
  ...
  "itemProps": {
    "buttons": [
      {
        "html": "复制",
        "callback": "copyMe"
      }
    ]
  }
}

用法相同, FormRenderVue 会尝试在点击复制按钮时执行 window.copyMewindow.copyMe的入参为 value, index, schema ,返回值会作为新的列表值

// 注意 value 是整个列表的 value
window.copyMe = ({ value, index, schema }) => {
  const item = value[index];
  value.splice(index, 0, item);
  return value;
};

object 对象

props

目前还没有,未来会扩展

url 组件

addonText 默认为 “测试链接”,可通过此字段自定义

prefixsuffix 为 antd 原生支持,如果使用则最终的 formData 里对应 key 的值会自动拼接上 prefix 和 suffix。例如 prefix: "https://", 填写了"www.taobao.com",则最终提交的 formData 值为"https://www.taobao.com"

upload 上传

uploadProps

upload 组件的主体 props,参考 antd/upload 文档

buttonProps

上传按钮 Button 组件的 props,参考 antd/button

color 颜色选择

props

colorPicker 组件的 props,参考rc-color-picker 文档

inputProps

输入框 input 的 props,参考 antd/input

slider 拖动选择数字

props

  1. slider 组件的主体 props,支持所有 slider 组件的 props,参考 antd/slider 文档

  2. 还支持hideInput, 默认false,用于控制是否展示 Input

inputProps

用于控制 input 展示的 props,支持所有 input 组件的 props,参考 antd/input 文档

自定义组件 props

当用户手写自定义组件是复合组件(由多个自然组件组合而成)时,推荐做法是 props 中放置一些全局需要使用的 props,会直接透传给组件,而其中单个元素的定制 props 使用 props1,props2,... 这样的命名。凡是包含 props(不区分大小写)的 schema 的 key 值,都会原样传递给自定义组件,例如

  percentInput: {
    title: "百分比输入",
    type: "number",
    props: {
      showInput: false
    },
    inputProps: {
      suffix: '%'
    },
    percentProps: {
      step: 10
    }
  }

传递给自定义组件的 props 为

{
  type: 'number',
  showInput: false,
  inputProps: {
    suffix: '%'
  },
  percentProps: {
    step: 10
  }
}

上次更新: