el-form.smart-form(:model='data', :size="size || 'mini'", :inline='isInline', :label-position='labelPosition', :label-width='labelWidth' :rules="rules" ref="form")
el-row(:gutter="gutter")
el-col(v-for="(item, index) in availableConfig"
:key="index + 1"
:span="item.span || span"
:push="item.push || 0"
:pull="item.pull || 0"
:offset="item.offset || 0")
el-divider(v-if="item.type === 'divider'") {{item.text}}
el-form-item(v-else :prop="item.prop" :class="[item.type]")
template(#label v-if="item.label") {{item.label}}
el-popover(width='200', trigger='hover', :placement="item.placement")
span.el-icon-question(v-if='item.reminder', slot="reference" tabindex="-1")
div(v-html='item.reminder')
slot(v-if="item.type === 'slot'", :name="item.prop" :data="{index, ...item}") {{item}}
//- 渲染 checkbox 组件
el-checkbox-group.checkbox-group(v-else-if="item.type === 'checkbox'", :min="item.min" :max="item.max" v-model='data[item.prop]' @change='selectChange.bind(this, item)()')
component(
:is="item.button ? 'elCheckboxButton': 'elCheckbox'"
v-for="i in customOptions.bind(this, item)()"
:label="i.value"
:disabled='disabled.bind(this, item)()'
:key="i.value | hash") {{i.label}}
//- 渲染 radio 组件
el-radio-group.radio-group(v-else-if="item.type === 'radio'", :min="item.min" :max="item.max" v-model='data[item.prop]' @change='selectChange.bind(this, item)()')
component(
:is="item.button ? 'elRadioButton': 'elRadio'"
v-for="i in customOptions.bind(this, item)()"
:label="i.value"
:disabled='disabled.bind(this, item)()'
:key="i.value | hash") {{i.label}}
//- 渲染 time 组件
el-time-select(v-else-if="item.type === 'time'", v-model='data[item.prop]', :disabled='disabled.bind(this, item)()', :picker-options="item.pickerOptions", :placeholder='item.placeholder' @change='selectChange.bind(this, item)()')
//- 渲染 select 组件
el-select(v-else-if="item.type === 'select'", :multiple='item.multiple', :allow-create="item.allowCreate", :value-key='item.key || "value"', :remote="!!item.remote", :remote-method="item.remote", :loading="selectLoading", :default-first-option="item.defaultFirstOption", clearable, :filterable='item.filterable || item.allowCreate', v-model='data[item.prop]', :placeholder='item.placeholder', :disabled='disabled.bind(this, item)()', @change='selectChange.bind(this, item)()', :popper-class="item.prop", :no-data-text="item.noDataText")
template(v-if="item.groups")
el-option-group(v-for='group in customGroups.bind(this, item)()', :key='group.label | hash', :label='group.label')
el-option(v-for='option in group.children', :key='option.value | hash', :label='option.label', v-html='option.custom && option.custom.bind(this, option)() || option.label', :value='option.value')
template(v-else)
el-option(v-for='option in customOptions.bind(this, item)()', :key='option.value | hash', :label='option.label' :value='option.value')
slot(:name="item.optionsSlot" :data="option") {{option.label}}
//- 渲染 autocomplete 组件
el-autocomplete(v-else-if="item.type === 'autocomplete'", v-model='data[item.prop]', :fetch-suggestions="item.suggestions.bind(data)" @select="item.select" :disabled='disabled.bind(this, item)()', :placeholder='item.placeholder', highlight-first-item)
//- 渲染 upload 组件
el-upload(v-else-if="item.type === 'upload'" :action='item.action', :list-type='item.listType', :limit='item.limit' :on-remove='handlePictureCardRemove.bind(this, item.prop)' :on-preview='handlePictureCardPreview' :on-success='handlePictureSuccess.bind(this, item.prop)')
img.thumb(v-if="item.thumb" :src="item.thumb.bind(this, data)()")
i.el-icon-plus
component(
v-else
:is="item.type | componentTransfer"
v-bind="getItem.bind(this, item)()"
v-model="data[item.prop]"
@change="selectChange.bind(this, item)()")
template(v-if='item.append', #append) {{item.append}}
template(v-if='item.prepend', #prepend) {{item.prepend}}
el-dialog(:visible.sync='dialogVisible')
img(width='100%', :src='dialogImageUrl', alt='')