vue.js 前端 vue使用elementui组件的的对话框；使用ref

 1.第一步，先在父组件中引用，设置ref的值

append-to-body width="1000px" title="编辑"

:close-on-click-modal="false">

:visible.sync="dialogEditVisible" />

 2.引入和注册组件：

import DialogEdit from './edit'

export default {

components: { Pagination,DialogAdd,DialogEdit,DialogView},

3.需要再data中设置对话框默认不打开：

dialogEditVisible: false,

4.在父组件中mothod中实现调用对话框的方法：

handleEdit(scope) {

this.dialogEditVisible = true

this.$nextTick(() => {

//this.$refs.dialogEdit

this.$refs.dialogEdit.getDetailed()

})

},

5.创建一个vue组件,名字为edit.vue，并且在method中添加getDetailed()   ，这个方法：

getDetailed() {      const loading = this.$loading({        lock: true,        text: 'Loading',        spinner: 'el-icon-loading',        background: 'rgba(0, 0, 0, 0.7)'      })      getInfo({ code: this.proid }).then(response => {        this.form = response.data.mdProjectInfo,        loading.close()      }).catch(function() {        loading.close()      })    },

相关文章