【Vue】el-dialog 弹窗以及重刷新代码写法

文件模拟

folder 文件夹里面有 file-list.vue 和 file-add.vue 两个文件

实现目标

file-list.vue 点击新增按钮跳转到 file-add.vue 页面，file-add.vue 页面表单提交重刷新 file-list.vue 页面数据

代码编写及解析

1、首先需要导入对应需要弹窗的页面（file-list.vue 页面）

<script>
  import FileAdd from './file-add'
  export default {
	components: {
	  FileAdd
	}
  }
</script>

2、编写 Html 部分代码（file-list.vue 页面）

<template>
  <el-dialog>
    <!-- 弹窗 -->
    <file-add v-if="fileAddVisible" ref="fileAdd" @refreshDataList="getDataList"/>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        fileAddVisible: false
	  }
	},
	methods: {
	  // 重刷新方法，如果有分页可以设置参数为第一页再查询
	  getDataList () {
		...
	  }
	}
  }
</script>

3、编写触发跳转的按钮（file-list.vue 页面）

<template>
  <el-dialog>
  	<el-button type="primary" @click="fileAddHandle()">新增</el-button>
    <!-- 弹窗 -->
    <file-add v-if="fileAddVisible" ref="fileAdd" @refreshDataList="getDataList"/>
  </el-dialog>
</template>

<script>
  export default {
	methods: {
	  // 按钮点击触发，可传参数
	  fileAddHandle () {
	    // 如果有传参可以对参数进行处理
	  	this.fileAddVisible = true
	  	this.$nextTick(() => {
	  	  // fileAdd 和上面 ref="fileAdd" 对应，init 是 file-add.vue 里面的方法
	  	  this.$refs.fileAdd.init()
	  	})
	  }
	}
  }
</script>

4、跳转后的页面代码（file-add.vue 页面）

<template>
  <el-dialog ... :visible.sync="fileAddVisible" :before-close="handleClose">
    <el-form :model="dataForm" ref="dataForm" :rules="rules" @keyup.enter.native="dataFormSubmit" style="width: 420px;" label-width="140px">
      ...
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        fileAddVisible: false,
        dataForm: {...},
        rules: {...},
        addParams: {...}
	  }
	},
	methods: {
	  // 可传参数
	  init () {
	    ...
	    this.fileAddVisible = true
	  },
	  // 表单提交
	  dataFormSubmit () {
	    this.$refs['dataForm'].validate((valid) => {
	      if (valid) {
	        // 处理好保存的参数调用后端接口
	        this.$http({
              url: this.$http.adornUrl('/file/add'),
              method: 'post',
              params: this.$http.adornParams(this.addParams, false)
            }).then(({data}) => {
              if (data && data.code === 0) {
                // 表单提交后关闭页面，之后调用 file-list.vue 的 @refreshDataList="getDataList" 的 getDataList 方法进行重刷新
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.fileAddVisible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
		  }
	    }
	  },
      // 关闭表单
      handleClose () {
        this.fileAddVisible = false
        this.$refs['dataForm'].resetFields()
	  }
	}
  }
</script>