<template>
|
<div class="role">
|
<!-- https://juejin.cn/post/7042597964618924069?searchId=202310071305486BA29870D97939288832#heading-8 -->
|
<!-- https://juejin.cn/post/7139110255748710436?searchId=2023092815420483B1983D44854DBE6608#comment -->
|
<el-form
|
ref="ruleForm"
|
class="rule-form"
|
:model="formConfig.formModels"
|
:rules="formConfig.formRules"
|
:label-width="formConfig.labelWidth || 'auto'">
|
<el-row>
|
<el-col v-for="item in formConfig.formItems" :key="item.label" :span="item.span || 24">
|
<el-form-item :label="item.label" :style="formConfig.itemStyle || null">
|
|
<template v-if="item.type === 'input' || item.type === 'password'">
|
<el-input :placeholder="item.placeholder || `请输入${item.label}`"
|
:show-password="item.type === 'password'"></el-input>
|
</template>
|
|
<template v-else-if="item.type === 'select'">
|
<el-select :placeholder="item.placeholder || `请选择${item.label}`">
|
<el-option v-for="option in item.options" :key="option.label" :label="option.label"
|
:value="option.value"></el-option>
|
</el-select>
|
</template>
|
|
<template v-else>
|
<el-date-picker v-bind="item.otherOptions"></el-date-picker>
|
</template>
|
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {}
|
},
|
props: {
|
formConfig: {
|
type: Object,
|
default: () => ({})
|
}
|
}
|
}
|
</script>
|
<style scoped lang="scss">
|
.el-form {
|
padding-right: 15px;
|
max-height: 550px;
|
overflow-y: auto;
|
}
|
|
::v-deep .el-form-item__label {
|
color: #fff
|
}
|
|
.el-select {
|
width: 100%;
|
}
|
</style>
|
