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