页面效果
实现
<a-form :form="form">
<a-row>
<a-col :span="12">
<a-form-item
label="城市区域"
:label-col="{ span: 5 }"
:wrapper-col="{ span: 15 }"
>
<a-cascader
v-decorator="[
'ruleForm.region_id',
ValidateRules.region_id,
]"
:show-search="{ filter }"
:allowClear="true"
:fieldNames="{
label: 'fullname',
value: 'id',
children: 'children',
}"
:options="region_opt"
change-on-select
@change="onStationRegionChange"
placeholder=""
expandTrigger="hover"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
label="站点级别"
:label-col="{ span: 5 }"
:wrapper-col="{ span: 15 }"
>
<a-select
v-decorator="[
'ruleForm.station_level_list',
ValidateRules.station_level_list,
]"
show-search
mode="multiple"
option-filter-prop="children"
option-label-prop="label"
>
<a-select-option
v-for="(d, index) in station_level"
:value="d"
:key="index"
:label="d"
>{{ d }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
label="数据源"
:label-col="{ span: 5 }"
:wrapper-col="{ span: 15 }"
>
<a-select
v-decorator="[
'ruleForm.program_info',
ValidateRules.program_info,
]"
show-search
placeholder="选择数据源"
option-filter-prop="children"
:filter-option="filterOption"
:allowClear="true"
>
<a-select-option
v-for="item in station_program_info_list"
:key="item.id"
>
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
label="偏移小时"
:label-col="{ span: 5 }"
:wrapper-col="{ span: 15 }"
>
<a-select
class="width70"
v-decorator="[
'ruleForm.offset_hour',
ValidateRules.offset_hour,
]"
>
<a-select-option
v-for="item in pyhourList"
:value="item.value"
:key="item.key"
>{{ item.title }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
label="离线时长"
:label-col="{ span: 5 }"
:wrapper-col="{ span: 15 }"
>
<a-select
class="width70"
v-decorator="[
'ruleForm.max_offline_hour',
ValidateRules.max_offline_hour,
]"
>
<a-select-option
v-for="item in pyDurationList"
:value="item.value"
:key="item.key"
>{{ item.title }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
label="PM倒挂"
:label-col="{ span: 5 }"
:wrapper-col="{ span: 15 }"
>
<a-switch v-model="ruleForm.pm_upside_down" />
</a-form-item>
</a-col>
</a-row>
</a-form>