OpForm

作者: laiyituan | 来源:发表于2018-12-29 16:20 被阅读3次

    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>)
            }
        }]
    

    相关文章

      网友评论

          本文标题:OpForm

          本文链接:https://www.haomeiwen.com/subject/eecplqtx.html