<script> export default { name: "SuperForm", props: { value: { type: [Object], required: true, }, dict: { type: [Object], required: true, }, columns: { type: [Array], required: true, }, }, components: { ElFileUpload: () => import("@/components/FileUpload/index.vue"), ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"), ElPopoverMultipleSelectV2: () => import("@/components/popover-select-v2/multiple.vue"), ElPopoverTreeSelect: () => import("@/components/popover-tree-select/index.vue"), ElPopoverMultipleTreeSelect: () => import("@/components/popover-tree-select/multiple.vue"), }, data() { const { columns } = this.$props; const innerColumns = columns; return { drawer: false, visible: false, innerColumns: innerColumns, }; }, computed: { innerValue: { get() { return this.value; }, set(value) { this.$emit("input", value); }, }, }, watch: {}, methods: { // getFormItemRequired(prop, value) { if (typeof prop.required === "function") { return prop.required(value); } if (typeof prop.required === "boolean") { return prop.required; } }, // 继承el-table的Method extendMethod() { const refMethod = Object.entries(this.$refs["superForm"]); for (const [key, value] of refMethod) { if (!(key.includes("$") || key.includes("_"))) { this[key] = value; } } }, }, created() {}, mounted() { this.extendMethod(); }, destroyed() {}, }; </script> <template> <el-form ref="superForm" v-bind="$attrs" v-on="$listeners" :model="innerValue" @submit.native.prevent > <el-row :gutter="24" style="display: flex; flex-wrap: wrap"> <el-col v-for="({ item, attr }, index) in innerColumns" :key="index" :span="item.span" > <el-form-item :prop="item.key" :label="item.title" :required="getFormItemRequired(item, innerValue)" > <slot :name="item.key" :row="innerValue" :item="item" :attr="attr"> <component v-if="attr.is === 'el-select'" v-bind="attr" v-model="innerValue[item.key]" style="width: 100%" > <template> <el-option v-for="item in dict.type[attr.dictName]" :key="item.value" :label="item.label" :value="item.value" > </el-option> </template> </component> <component v-else-if="attr.is === 'el-popover-select-v2'" v-bind="attr" v-model="innerValue[item.key]" :source.sync="innerValue" style="width: 100%" > </component> <component v-else-if="attr.is === 'el-popover-multiple-select-v2'" v-bind="attr" v-model="innerValue[item.key]" :source.sync="innerValue" style="width: 100%" > </component> <component v-else-if="attr.is === 'el-popover-tree-select'" v-bind="attr" v-model="innerValue[item.key]" :source.sync="innerValue" style="width: 100%" > </component> <component v-else-if="attr.is === 'el-popover-multiple-tree-select'" v-bind="attr" v-model="innerValue[item.key]" :source.sync="innerValue" style="width: 100%" > </component> <component v-else v-bind="attr" v-model="innerValue[item.key]" style="width: 100%" > </component> </slot> </el-form-item> </el-col> </el-row> </el-form> </template> <style scoped></style>