在更改Vue项目中碰到的问题

Question

在Vue+elementPlus的前端项目中
我现在的做法是 四个dialog中包含四个含有很多数据的form表单
需求是:将form抽离出来 形成单独的四个form 并且将四个dialog合并为一个dialog
问题是:
如何在一个dialog中如何复用四个含有大量数据的form表单 并根据不同的情况显示不同的form

Answer 1

在Vue中，我们可以使用动态组件和条件渲染来实现你的需求。动态组件可以根据动态传入的name属性渲染不同的组件，条件渲染则可以根据条件决定是否渲染某个组件。

首先，我们需要将四个表单组件抽离出来，例如Form1.vue, Form2.vue, Form3.vue, Form4.vue。

然后，我们创建一个Dialog.vue组件，该组件根据传入的formType动态渲染不同的表单组件。

下面是一个基本的示例：

<template>  
  <el-dialog :visible.sync="visible" :title="title">  
    <component :is="formType"></component>  
  </el-dialog>  
</template>  
  
<script>  
import Form1 from './Form1.vue'  
import Form2 from './Form2.vue'  
import Form3 from './Form3.vue'  
import Form4 from './Form4.vue'  
  
export default {  
  components: {  
    Form1,  
    Form2,  
    Form3,  
    Form4  
  },  
  data() {  
    return {  
      visible: false,  
      title: '选择表单',  
      formType: 'Form1' // 默认显示第一个表单  
    }  
  },  
  methods: {  
    showDialog(formType) {  
      this.formType = formType;  
      this.visible = true;  
    }  
  }  
}  
</script>

在这个Dialog.vue组件中，我们使用了特殊的标签来动态渲染不同的组件。当formType改变时，Vue会自动更新渲染的组件。

然后，在你的主组件中，你可以根据需要调用showDialog方法来显示不同的表单。例如：

<template>  
  <div>  
    <button @click="showDialog('Form1')">显示Form1</button>  
    <button @click="showDialog('Form2')">显示Form2</button>  
    <button @click="showDialog('Form3')">显示Form3</button>  
    <button @click="showDialog('Form4')">显示Form4</button>  
  </div>  
  <Dialog ref="dialog"></Dialog>  
</template>  
  
<script>  
import Dialog from './Dialog.vue'  
export default {  
  components: { Dialog },  
  methods: { showDialog } // 假设你已经定义了showDialog方法，例如在methods中定义或者从其他地方导入  
}  
</script>

希望帮到你