vue3 关闭el-dialog缓慢

在 Vue3 中关闭 el-dialog 缓慢可能是因为 el-dialog 组件的动画效果导致的。可以通过在 el-dialog 上添加 :before-close 方法来禁用动画效果，从而加快关闭速度。具体实现方法如下：

<el-dialog :before-close="handleBeforeClose">
  // dialog content
</el-dialog>

methods: {
  handleBeforeClose(done) {
    this.$nextTick(() => {
      done();
    });
  }
}

在 before-close 方法中，我们通过调用 done() 来告诉 el-dialog 组件可以关闭了。同时，我们使用 $nextTick() 方法来确保在关闭之前所有的 DOM 更新都已经完成。

相关问题

vue中在el-dialog中再打开一个el-dialog

在Vue中，在el-dialog中再打开一个el-dialog可以通过嵌套组件的方式来实现。

具体实现方法如下：

1. 创建一个弹窗组件，例如MyDialog，用于显示一个el-dialog。

2. 在MyDialog组件中，添加一个插槽用于显示弹窗内容，并在插槽中使用el-dialog组件来实现弹窗的显示和隐藏。

例如，在MyDialog组件中实现一个弹窗：

<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" @close="onClose">
    <slot></slot>
    
    <el-dialog v-if="showChildDialog" :visible.sync="childDialogVisible" @close="onChildDialogClose">
      <div>子弹窗内容</div>
    </el-dialog>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogTitle: String
  },
  data() {
    return {
      dialogVisible: true,
      showChildDialog: false,
      childDialogVisible: false
    }
  },
  methods: {
    onClose() {
      this.$emit('close');
    },
    onChildDialogClose() {
      this.showChildDialog = false;
    }
  }
}
</script>

在上面的代码中，使用了el-dialog组件来实现弹窗的显示和隐藏，同时添加了一个插槽用于显示弹窗内容。在插槽中，再次使用el-dialog组件来实现子弹窗的显示和隐藏。

3. 在需要打开弹窗的地方，引入MyDialog组件，并通过v-if或v-show指令来控制弹窗的显示和隐藏。

例如，在父组件中引入MyDialog组件并打开弹窗：

<template>
  <div>
    <button @click="showDialog = true">打开弹窗</button>
    
    <my-dialog v-if="showDialog" :dialogTitle="dialogTitle" @close="showDialog = false">
      <div>
        弹窗内容
        <button @click="showChildDialog = true">打开子弹窗</button>
      </div>
    </my-dialog>
  </div>
</template>

<script>
import MyDialog from './MyDialog.vue'

export default {
  components: {
    MyDialog
  },
  data() {
    return {
      showDialog: false,
      dialogTitle: '弹窗标题'
    }
  }
}
</script>

在上面的代码中，通过v-if指令来控制弹窗的显示和隐藏，使用了MyDialog组件，并传递了相应的props和事件。

通过以上步骤，就可以在一个el-dialog中再打开一个el-dialog了。注意，在嵌套的el-dialog中，需要使用v-if或v-show指令来控制显示和隐藏，并在组件中添加相应的事件来关闭弹窗。

vue3+el-dialog+el-table

在 Vue3 中，使用 Element UI 的 el-table 和 el-dialog 组件，可以按照以下步骤来实现自定义弹窗：

1. 在 el-table 中定义 scoped slot，例如：

<el-table :data="tableData">
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column prop="gender" label="Gender"></el-table-column>
  <el-table-column label="Actions">
    <template #default="{ row }">
      <el-button @click="handleClick(row)">Edit</el-button>
      <el-button @click="handleDelete(row)">Delete</el-button>
    </template>
  </el-table-column>
</el-table>

2. 在 setup 函数中定义 handleClick 方法，例如：

import { ref } from 'vue';

export default {
  setup() {
    const dialogVisible = ref(false);
    const editRow = ref({});

    const handleClick = (row) => {
      dialogVisible.value = true;
      editRow.value = Object.assign({}, row);
    };

    return {
      dialogVisible,
      editRow,
      handleClick
    };
  }
}

3. 在 el-dialog 中使用 editRow 数据来渲染自定义的弹窗：

<el-dialog v-model:visible="dialogVisible">
  <el-form v-if="editRow">
    <el-form-item label="Name">
      <el-input v-model="editRow.name"></el-input>
    </el-form-item>
    <el-form-item label="Gender">
      <el-radio-group v-model="editRow.gender">
        <el-radio :label="1">Male</el-radio>
        <el-radio :label="2">Female</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
  <div slot="footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="handleSave">Save</el-button>
  </div>
</el-dialog>

这样，当用户点击 Edit 按钮时，就会弹出自定义的编辑弹窗，用户可以在弹窗中编辑数据，点击确认按钮后，数据会保存到 editRow 中，然后再自动更新到表格中。注意，在 Vue3 中使用 v-model 绑定 el-dialog 的 visible 属性时，需要加上修饰符 `v-model:visible`，否则会出现警告。同时，在 el-dialog 中添加一个保存按钮，点击后可以保存数据并关闭弹窗。