el-dialog下面弄个线

您可以通过在`el-dialog`组件下面添加一个`<div>`元素，并给它设置一个边框样式来实现添加一条线的效果。以下是一个示例代码：

<template>
  <el-dialog title="对话框标题" :visible="dialogVisible" width="30%">
    <div class="dialog-content">
      <!-- 对话框内容 -->
    </div>
    <div class="line"></div> <!-- 添加的线 -->
    <span slot="footer" class="dialog-footer">
      <!-- 对话框底部按钮 -->
    </span>
  </el-dialog>
</template>

<style>
.dialog-content {
  /* 对话框内容的样式 */
}

.line {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-top: 10px;
  margin-bottom: 10px;
}

.dialog-footer {
  /* 对话框底部按钮的样式 */
}
</style>

您可以根据需要自定义`line`类的样式，例如调整宽度、高度、背景颜色等。

相关问题

vue中el-dialog套el-dialog打不开的问题

根据提供的引用内容，el-dialog是element ui中的一个对话框组件，而el-dialog套el-dialog打不开的问题可能是由于以下原因导致的：

1. el-dialog的z-index值设置过小，导致被套在了其他el-dialog的下面，无法显示出来。
2. el-dialog的open属性没有正确绑定，导致无法打开。
3. el-dialog的visible属性没有正确绑定，导致无法显示。

解决这个问题的方法有以下几种：

1. 确保每个el-dialog的z-index值都不同，可以通过在样式中设置z-index值来实现。
2. 确保每个el-dialog的open属性都正确绑定到不同的变量上。
3. 确保每个el-dialog的visible属性都正确绑定到不同的变量上。

下面是一个示例代码，演示如何在vue中使用el-dialog组件：

<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" title="对话框1">
      <p>这是对话框1的内容</p>
      <el-button type="primary" @click="openDialog2">打开对话框2</el-button>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible2" title="对话框2">
      <p>这是对话框2的内容</p>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogVisible2: false
    };
  },
  methods: {
    openDialog2() {
      this.dialogVisible2 = true;
    }
  }
};
</script>

el-dialog如何删除分割线

要删除el-dialog的分割线，你可以通过修改全局样式来实现。根据引用[3]中提供的代码，你可以在全局样式中找到以下代码：

.el-dialog > .el-dialog__body {
border-top: 1px solid #e9e9e9;
border-bottom: 1px solid #e9e9e9;
}

要删除分割线，你可以将这两行代码注释掉或者删除掉。这样就可以去掉el-dialog的顶部和底部的分割线了。