OpTable
1剧腻，首先引入組件
import OpForm from '@/components/OpForm'
@Component({
components: { OpForm }
})
2，使用組件
<op-form></op-form>
3隔嫡，參數(shù)說明
opform 屬性說明
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| formData | 表單結(jié)構(gòu)（具體見下說明） | 對象 | 必填 | 無 |
| refName | 表單ref | string | 選填 | 無 |
| modelData | 表單數(shù)據(jù)對象 | object | 選填 | 無 |
formData
{
inline: true,
size: 'mini',
list: [{
category: '搜索條件',
isShowCategory: false,
children: [{
label: '實(shí)際收貨時間',
prop: 'receiveTime',
type: 'datetimerange',
valueFormat: 'timestamp',
style: '',
defaultTime: ['10:00:00'],
rangeSeparator: '至',
startPlaceholder: '開始日期',
endPlaceholder: '結(jié)束日期'
}]
}]
}
| 屬性 | 說明 | |
|---|---|---|
| inline | 行內(nèi)表單模式 | boolean |
| size | 參考element-ui的size | string,默認(rèn)為mini |
| label | 標(biāo)簽文本 | string |
| prop | 表單域 model 字段甸怕，在使用 validate、resetFields 方法的情況下腮恩，該屬性是必填的 | string |
| width | 對應(yīng)列的寬度 | |
| type | 對應(yīng)element-ui里各種表單 | string |
| ... | type對應(yīng)element-ui里表單的各種屬性（如沒有請自行加上） | |
| render | Function(h, params)JSX方式渲染內(nèi)容梢杭，可自定義 |
tableStrucure例子
[
{
label: '實(shí)際收貨時間',
prop: 'receiveTime',
type: 'datetimerange',
valueFormat: 'timestamp',
style: '',
defaultTime: ['10:00:00'],
rangeSeparator: '至',
startPlaceholder: '開始日期',
endPlaceholder: '結(jié)束日期'
},
{
label: '物流廠商',
prop: 'brand',
type: 'select',
placeholder: '請選擇物流廠商',
value: 'value', // 默認(rèn) 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>)
}
}]
