宇智波擎枫
2021-09-18 09:53
采纳率: 66.7%
浏览 51
已结题

Vue+Element UI dialog中 动态加载不同的子组件,如何实现?

用Vue+Element UI做了一个待办系统,系统中有不同类型的业务表单,待办提醒都是在一个地方,如下图:

img

有很多待办条目,点击其中一条弹出dialog,怎么动态加载特定的业务表单呢?

  • 好问题 提建议
  • 收藏

4条回答 默认 最新

  • tonyzhangcn 2021-09-18 10:03
    已采纳

    把不同的表单做成子组件吧,例如 Form1.vue(假设name 是form1), Form2.vue(假设name 是form2), Form3.vue(假设name 是form3),
    然后再封装一层,例如Forms.vue,用属性来控制,显示那个表单
    其内容可以是(Forms.vue):

    <template>
    <component :is="formName" xxxxxxx>
    </template>
    
    xxxxxx
    export default {
        name:'Forms', 
        props:['formName'], //这个formName是父组件点击某个业务时传过来的(例如form1,form2,form3...)
        xxxxxxx
    }
    
    已采纳该答案
    评论
    解决 1 无用
    打赏 举报
  • qq_40471785 2021-09-18 10:04

    用component标签,根据待办类型在is绑定对应组件。

    评论
    解决 1 无用
    打赏 举报
  • MecuryJerry 2021-09-18 11:22

    你是想打开dialog时,dialog里显示待办条目的信息吗?如果这样的话只需要传值进dialog组件里就行,逻辑就三步:
    1.获取待办条目的值:如果你这些条目是el-table,获取当前行的数据,element官方文档里有怎么获取的方法。
    2.传值,涉及到vue组件间通信问题。
    3.获取值,直接把数组或者对象给到你dialog里表单绑定的值里即可。

    评论
    解决 1 无用
    打赏 举报
  • 浪在前端 2021-09-18 09:58

    props: { flag: Boolean }, 用v-if='flag'判断

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题