OpForm

OpTable

1，首先引入组件

import OpForm from '@/components/OpForm'
@Component({
  components: {  OpForm }
})

2，使用组件

<op-form></op-form>

3，参数说明
opform 属性说明

参数	说明	类型	可选值	默认值
formData	表单结构（具体见下说明）	对象	必填	无
refName	表单ref	string	选填	无
modelData	表单数据对象	object	选填	无

formData

{
    inline: true,
    size: 'mini',
    list: [{
      category: '搜索条件',
      isShowCategory: false,
      children: [{
        label: '实际收货时间',
        prop: 'receiveTime',
        type: 'datetimerange',
        valueFormat: 'timestamp',
        style: '',
        defaultTime: ['10:00:00'],
        rangeSeparator: '至',
        startPlaceholder: '开始日期',
        endPlaceholder: '结束日期'
      }]
  }]
}

属性	说明
inline	行内表单模式	boolean
size	参考element-ui的size	string,默认为mini
label	标签文本	string
prop	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的	string
width	对应列的宽度
type	对应element-ui里各种表单	string
...	type对应element-ui里表单的各种属性（如没有请自行加上）
render	Function(h, params)JSX方式渲染内容，可自定义

tableStrucure例子

[
    {
      label: '实际收货时间',
      prop: 'receiveTime',
      type: 'datetimerange',
      valueFormat: 'timestamp',
      style: '',
      defaultTime: ['10:00:00'],
      rangeSeparator: '至',
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期'
    },
    {
      label: '物流厂商',
      prop: 'brand',
      type: 'select',
      placeholder: '请选择物流厂商',
      value: 'value', // 默认 option
      options: [
          { value: '1', label: 'A仓库' },
          { value: '2', label: 'B仓库' },
          { value: '3', label: 'C仓库' }
      ]
    },{
        label: '车次',
        prop: 'factoryContractNo',
        type: 'input',
        disabled: true
    }，
    {
      label: '收货人',
      prop: 'takeBy',
      type: 'render',
      class: 'takeBy-wrap',
      render: h => {
        if (_this.modelData.applyInfo.length) {
          return (<div>
            {_this.modelData.applyInfo.map((item, itemIndex) => {
              return (<el-tag closable on-close={_this.closeTag(itemIndex)} size="mini">{item}</el-tag>)
            })}
          </div>)
        } else {
          return (<div>
            <el-tag size="mini">暂未选择收货人</el-tag>
            <el-button type="text" onClick={_this.takeBySearch}>选择</el-button>
          </div>)
        }
    }]