| | |
| | | * @version: 1.0 |
| | | * @Author: sakuya |
| | | * @Date: 2021年9月22日09:26:25 |
| | | * @LastEditors: |
| | | * @LastEditTime: |
| | | * @LastEditors: Sneed |
| | | * @LastEditTime: 2024-06-02 15:06:45 |
| | | --> |
| | | |
| | | <template> |
| | | <el-skeleton v-if="renderLoading || Object.keys(form).length==0" animated /> |
| | | |
| | | <el-form v-else ref="form" :model="form" :label-width="config.labelWidth" :label-position="config.labelPosition" v-loading="loading" element-loading-text="Loading..."> |
| | | <el-form v-else ref="form" :model="form" :label-width="config.labelWidth" :label-position="config.labelPosition" |
| | | v-loading="loading" element-loading-text="Loading..."> |
| | | <el-row :gutter="15"> |
| | | <template v-for="(item, index) in config.formItems" :key="index"> |
| | | <el-col :span="item.span || 24" v-if="!hideHandle(item)"> |
| | |
| | | </template> |
| | | <!-- input --> |
| | | <template v-if="item.component=='input'" > |
| | | <el-input v-model="form[item.name]" :placeholder="item.options.placeholder" clearable :maxlength="item.options.maxlength" show-word-limit></el-input> |
| | | <el-input v-model="form[item.name]" :placeholder="item.options.placeholder" clearable |
| | | :maxlength="item.options.maxlength" show-word-limit></el-input> |
| | | </template> |
| | | <!-- checkbox --> |
| | | <template v-else-if="item.component=='checkbox'" > |
| | | <template v-if="item.name" > |
| | | <el-checkbox v-model="form[item.name][_item.name]" :label="_item.label" v-for="(_item, _index) in item.options.items" :key="_index"></el-checkbox> |
| | | <el-checkbox v-model="form[item.name][_item.name]" :label="_item.label" |
| | | v-for="(_item, _index) in item.options.items" :key="_index"></el-checkbox> |
| | | </template> |
| | | <template v-else > |
| | | <el-checkbox v-model="form[_item.name]" :label="_item.label" v-for="(_item, _index) in item.options.items" :key="_index"></el-checkbox> |
| | | <el-checkbox v-model="form[_item.name]" :label="_item.label" |
| | | v-for="(_item, _index) in item.options.items" :key="_index"></el-checkbox> |
| | | </template> |
| | | </template> |
| | | <!-- checkboxGroup --> |
| | | <template v-else-if="item.component=='checkboxGroup'" > |
| | | <el-checkbox-group v-model="form[item.name]"> |
| | | <el-checkbox v-for="_item in item.options.items" :key="_item.value" :label="_item.value">{{_item.label}}</el-checkbox> |
| | | <el-checkbox v-for="_item in item.options.items" :key="_item.value" |
| | | :label="_item.value">{{ _item.label }}</el-checkbox> |
| | | </el-checkbox-group> |
| | | </template> |
| | | <!-- upload --> |
| | |
| | | </template> |
| | | <!-- select --> |
| | | <template v-else-if="item.component=='select'" > |
| | | <el-select v-model="form[item.name]" :multiple="item.options.multiple" :placeholder="item.options.placeholder" clearable filterable style="width: 100%;"> |
| | | <el-option v-for="option in item.options.items" :key="option.value" :label="option.label" :value="option.value"></el-option> |
| | | <el-select v-model="form[item.name]" :multiple="item.options.multiple" |
| | | :placeholder="item.options.placeholder" clearable filterable style="width: 100%;"> |
| | | <el-option v-for="option in item.options.items" :key="option.value" |
| | | :label="option.label" :value="option.value"></el-option> |
| | | </el-select> |
| | | </template> |
| | | <!-- cascader --> |
| | | <template v-else-if="item.component=='cascader'" > |
| | | <el-cascader v-model="form[item.name]" :options="item.options.items" clearable></el-cascader> |
| | | <el-cascader v-model="form[item.name]" :options="item.options.items" |
| | | clearable></el-cascader> |
| | | </template> |
| | | <!-- date --> |
| | | <template v-else-if="item.component=='date'" > |
| | | <el-date-picker v-model="form[item.name]" :type="item.options.type" :shortcuts="item.options.shortcuts" :default-time="item.options.defaultTime" :value-format="item.options.valueFormat" :placeholder="item.options.placeholder || '请选择'"></el-date-picker> |
| | | <el-date-picker v-model="form[item.name]" :type="item.options.type" |
| | | :shortcuts="item.options.shortcuts" :default-time="item.options.defaultTime" |
| | | :value-format="item.options.valueFormat" |
| | | :placeholder="item.options.placeholder || '请选择'"></el-date-picker> |
| | | </template> |
| | | <!-- number --> |
| | | <template v-else-if="item.component=='number'" > |
| | |
| | | <!-- radio --> |
| | | <template v-else-if="item.component=='radio'" > |
| | | <el-radio-group v-model="form[item.name]"> |
| | | <el-radio v-for="_item in item.options.items" :key="_item.value" :label="_item.value">{{_item.label}}</el-radio> |
| | | <el-radio v-for="_item in item.options.items" :key="_item.value" |
| | | :label="_item.value">{{ _item.label }}</el-radio> |
| | | </el-radio-group> |
| | | </template> |
| | | <!-- color --> |
| | |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | </style> |
| | | <style></style> |