怎么有这么好看的人
2021-11-26 10:28
采纳率: 100%
浏览 39
已结题

vue中使用element ui的dialog问题

在用户列表组件添加一个dialog,dialog中使用添加用户的组件,该组件包含一个form表单和提交button,现在当点击提交用户添加成功之后如何自动关闭dialog?友情各位给个思路

  • 好问题 提建议
  • 收藏

3条回答 默认 最新

  • 嘿嘿!请多指教 2021-11-26 10:31
    已采纳
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    
    
    已采纳该答案
    评论
    解决 1 无用
    打赏 举报
  • 添加一个变量设置为false就可以关闭,

     :visible.sync="visible"
    
    

    参考:

    <template>
      <el-dialog
        :title="!dataForm.areaId ? '新增' : '修改'"
        :close-on-click-modal="false"
        :visible.sync="visible"
        width="50%"
      >
        <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" style="width:95%;" @keyup.enter.native="dataFormSubmit()">
          <el-row>
            <el-col :span="24">
              <el-form-item label="考区名称" prop="areaName">
                <el-input v-model="dataForm.areaName" placeholder="请输入考区名称" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="排序" prop="seq">
                <el-input v-model="dataForm.seq" placeholder="请输入排序" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="danger" @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="dataFormSubmit()">确 定</el-button>
        </span>
      </el-dialog>
    </template>
    <script>
    import { getInfo, add, edit } from '@/api/sys/area'
    export default {
      data() {
        return {
          visible: false,
          dataForm: {
            areaId: '',
            areaName: '',
            seq: '1'
          },
          dataRule: {
            areaName: [
              { required: true, message: '考区名称不能为空', trigger: 'blur' }
            ],
            seq: [
              { required: true, message: '排序不能为空', trigger: 'blur' }
            ]
          }
        }
      },
      methods: {
        init(id) {
          this.dataForm.areaId = id
          this.visible = true
          this.resetForm('dataForm')
          this.dataForm.seq = 1
          if (this.dataForm.areaId) {
            getInfo(id).then(res => {
              if (res && res.code === 200) {
                this.dataForm.areaId = res.data.areaId
                this.dataForm.areaName = res.data.areaName
                this.dataForm.seq = res.data.seq
              }
            })
          }
        },
        // 表单提交
        dataFormSubmit() {
          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
              const param = {
                'areaId': this.dataForm.areaId,
                'areaName': this.dataForm.areaName,
                'seq': this.dataForm.seq
              }
              if (!this.dataForm.areaId) {
                add(param).then(res => {
                  this.returnResponse(res)
                })
              } else {
                edit(param).then(res => {
                  this.returnResponse(res)
                })
              }
            }
          })
        }
      }
    }
    </script>
    
    
    
    评论
    解决 无用
    打赏 举报
  • 浪在前端 2021-11-26 10:29

    this.$emit("closeDialog");

    // 父组件
    closeDialog() {
    this.dialogVisible = false;
    }

    编辑记录

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题