<template> <div class="dashboard-formitem"> <template v-for="(item, index) in formData"> <el-form-item :key="index" :label-width="labelWidth" :label="item.formLabel || item.label" :rules="item.rules" :prop="item.key" :class="item.formLabel || item.label ? 'dee-form-item' : 'dee-all-row'"> <component :is="item.component" v-model="form[item.key]" :form-key="item.key" :mul-form="form" v-bind="item" :config="item" @change="change($event, item.key, formData)" @handleClick="click($event, item.key)" @mulClick="mulClick(...arguments, index)" @toolsClick="toolsClick(...arguments, index)" /> </el-form-item> </template> </div> </template> <script> import DeeRadioImageGroup from '@/components/Dashboard/DeeRadioImageGroup.vue' import DeeDashboardRadioImageGroup from '@/components/Dashboard/DeeDashboardRadioImageGroup.vue' import DeeBackgroundImage from '@/components/Dashboard/DeeBackgroundImage.vue' import DeeBtnTools from '@/components/Dashboard/DeeBtnTools.vue' import DeeSelect from '@/components/Dashboard/DeeSelect.vue' import DeeMultipleList from '@/components/Dashboard/DeeMultipleList.vue' import DeeText from '@/components/Dashboard/DeeText.vue' import DeeTreeFormItem from '@/components/Dashboard/DeeTreeFormItem.vue' import DeeNestingFormItem from '@/components/Dashboard/DeeNestingFormItem.vue' import DeeThemeStyle from '@/components/Dashboard/DeeThemeStyle.vue' // export default { name: 'DeeFormItem', components: { DeeBtnTools, DeeBackgroundImage, DeeRadioImageGroup, DeeSelect, DeeMultipleList, DeeText, DeeTreeFormItem, DeeNestingFormItem, DeeThemeStyle, DeeDashboardRadioImageGroup }, props: { formData: { type: Array, required: true, default: () => { return [] } }, labelWidth: { type: String, default: '' }, form: { type: Object, required: true, default: () => { return {} } } }, methods: { change(val, key, formData) { this.$emit('change', val, key, formData) }, click(val, key) { this.$emit('mulClick', val, key) }, mulClick(method, index, list, curIndex) { this.$emit('mulClick', method, index, list, curIndex) }, toolsClick(method, index, list, curIndex) { this.$emit('toolsClick', method, index, list, curIndex) } } } </script> <style lang="scss"> .dashboard-formitem{ .dee-form-item { width: 100%; display: flex !important; } .dee-form-item .el-form-item__content { display: flex !important; /* width: calc(100% - 100px) !important; */ flex: 1; } .dee-form-item .el-select { /* width: 100%; */ flex: 1; } .dee-form-item .dee-text { /* width: 100%; */ flex: 1; } .dee-all-row, .dee-all-row .el-form-item__content { display: grid !important; width: 100%; flex: 1; } } </style>