前端在el-dialog中嵌套多个el-dialog

• 前端

前端在el-dialog中嵌套多个el-dialog

  • 一、应用场景
  • 二、代码实现

一、应用场景

  • 应用场景：需要点击按钮后弹出第一层对话框，在第一层对话框中填写内容后，再点击确认弹出第二层对话框，且需将第一层填入的内容传递给第二层，再第二层时弹出提示，再通过点击第二层的确认按钮进行请求接口，将第一层的内容 传递给后端

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

二、代码实现

  
    
      
        修改备注
      
    
  


  
    
    
      
      
        
          
        
      
      
      
        请确认是否发送数据?
        
          
            关闭
             确认 
          
        
      
    
    
      
        {{
          t('global.action.close')
        }}
        
          {{ t('global.action.confirm') }}
        
      
    
  



import { defineComponent, reactive } from 'vue';
import { Data, sendData } from '@/services/listData';

interface ViewState {
  selectedOrders: Data[];
  note: string;
  outerVisible: boolean;
  innerVisible: boolean;
}

export default defineComponent({
  name: 'list',
  components: {},
  setup() {
    const state = reactive({
      note: '',
      outerVisible: false,
      innerVisible: false,
    });

    // 关闭内层对话框的同时也关闭外层的对话框
    function closeAllDialog() {
      // 关闭内层的对话框
      state.innerVisible = false;
      // 关闭外层的对话框
      state.outerVisible = false;
    }

    function saveConfirm() {
      // 所勾选的id
      const selectedIds = selection.value.map(i => {
        return i.id;
      });
      // 这里写请求接口的逻辑
      sendData(selectedIds, state.note)
        .then(() => {
          ElMessage({
            type: 'success',
            message: '发送成功',
          });
        })
        .finally(() => {
          state.innerVisible = false;
          state.outerVisible = false;
        });
    }

    return {
      ...toRefs(state),
      saveConfirm,
      closeAllDialog,
    };
  },
});

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/2e1a813359.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐