Vue之功能全面的表格（五）对话框的弹出和关闭

对话框组件

1、创建一个对话框组件，具备传递close和save事件的能力，需要注意的是：

当组件使用父组件传入的prop参数作为对话框的visible属性时，需要将其转化为组件自己的data属性或computed属性，不然可以正常运行，但后台会报错，如果使用data属性，需要添加watch监视器，使用computed属性，需要同时具备get和set方法。其次，需要在before-close函数中修改visible属性。

2、直接在父组件中使用对话框而不创建子组件的话，可以不用考虑上述问题，但是不利于代码的复用和解耦。
3、在目录src/components/目录下创建EditDialog.vue

<template>
  <el-dialog :visible.sync="localShow" :title="title" :before-close="beforeClose">
    <!-- 插槽区 -->
    <slot></slot>
    <!-- 按钮区 -->
    <span slot="footer">
        <el-button type="success" icon="el-icon-check" @click="save">保存</el-button>
        <el-button type="danger" icon="el-icon-close" @click="close">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '对话框'
    }
  },
  data () {
    return {
      localShow: this.show
    }
  },
  watch: {
    show (val) {
      this.localShow = val
    }
  },
  methods: {
    beforeClose () {
      this.close()
    },
    close () {
      this.$emit('close')
    },
    save () {
      this.$emit('save')
    }
  }
}
</script>

4、在DataTable.vue中引入EditDialog 组件，并增加控制对话框显示和关闭的属性和方法

import EditDialog from './EditDialog'

components: {
    ViewPage, 
    EditDialog
},
data() {
    return {
        ...
        editShow: false
    }
},
methods: {
    ...
    addTodo() {
        this.editShow = true
    },
    saveTodo() {
        this.closeEditDialog()
    },
    closeEditDialog() {
        this.editShow = false
    }
},

5、添加编辑对话框

<!-- 表格区 -->
...
<!-- 对话框 -->
<edit-dialog :show="editShow" title="编辑学习计划" @close="closeEditDialog" @save="saveTodo"></edit-dialog>

6、为添加按钮绑定事件

<!-- 左按钮区 -->
<template slot="left-field">
    <el-button type="danger" icon="el-icon-circle-plus-outline" @click="addTodo">添加</el-button>
</template>

7、点击添加按钮，对话框弹出

小结

本节实现了添加功能对话框的弹出和关闭，下节将继续完成数据的添加功能