el-dialog自动关闭

根据提供的引用内容，el-dialog在鼠标往左滑动时会自动关闭。为了防止el-dialog自动关闭，可以在el-dialog标签中添加属性:close-on-click-modal="false"。这样设置后，当鼠标往左滑动时，el-dialog不会自动关闭。

以下是一个示例代码：

<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
  <!-- 对话框内容 -->
</el-dialog>

请注意，这只是一个示例代码，你需要根据你的实际情况进行相应的修改。

相关问题

ElementUI+Vue 解决在使用el-dialog时,点击el-dialog外的其他el-dialog的关闭按钮会导致该对话框关闭

当你在Element UI + Vue项目中遇到这样的问题，即点击了外部的另一个`el-dialog`的关闭按钮会意外地关闭当前对话框，这通常是由于`el-dialog`默认的行为设置导致的。`el-dialog`有一个名为`close-on-click-modal`的属性，默认值为`true`，这意味着当用户点击对话框之外的地方（包括另一个对话框）时，它会自动关闭。

要解决这个问题，你需要禁用这个特性。这里是如何操作的：

1. 首先，在你的Vue组件中引入`ElementUI`并禁用`close-on-click-modal`属性，例如在`data()`函数里初始化：

export default {
  data() {
    return {
      dialogProps: {
        closeOnPressEscape: true, // 保留ESC关闭功能
        closeOnClickModal: false, // 关闭对话框时不响应点击模态区域
      },
    };
  },
};

2. 当创建`el-dialog`实例时，传递这个自定义属性：

<el-dialog v-model="dialogVisible" :props="dialogProps">
  <!-- ... -->
</el-dialog>

通过以上步骤，当用户点击另一个`el-dialog`的关闭按钮时，当前对话框将不会被关闭。

el-dialog内的el-select如何在el-dialog关闭时自动折叠

可以通过监听`el-dialog`的`closed`事件，在事件触发时手动将`el-select`的折叠状态设置为true。具体实现可以参考以下代码：

<template>
  <el-dialog
    title="选择选项"
    :visible.sync="dialogVisible"
    @closed="handleDialogClosed"
  >
    <el-select v-model="selectedOption" :collapse-tags="true">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      options: [
        { label: '选项1', value: 1 },
        { label: '选项2', value: 2 },
        { label: '选项3', value: 3 }
      ],
      selectedOption: null
    };
  },
  methods: {
    handleDialogClosed() {
      // 在dialog关闭时将el-select的折叠状态设置为true
      this.$nextTick(() => {
        const select = this.$refs.select;
        select.collapseTags = true;
      });
    }
  }
};
</script>

在上述代码中，我们在`el-dialog`组件上监听了`closed`事件，并在事件处理函数`handleDialogClosed`中将`el-select`的折叠状态设置为true。需要注意的是，由于`el-select`是通过ref引用的，因此需要在下一次DOM更新后才能获取到`el-select`实例并修改其属性。因此我们使用了`$nextTick`方法来等待下一次DOM更新后再进行设置。