vue2封装对话框el-dialog组件

为了页面代码更加整洁我们可以将组件进行二次封装使用，以下是我封装的element中el-dialog对话框组件。

1.写好子组件对话框

<template>
  <el-dialog
    :title="showTitle"
    width="50%"
    :visible="dialogShow"
    @close="handleClose"
  >
    <el-form ref="formList" label-width="80px" :model="formList" :rules="rules">
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="formList.name" />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="formList.code" />
      </el-form-item>
      <el-form-item label="权限描述" prop="description">
        <el-input v-model="formList.description" />
      </el-form-item>
      <el-form-item label="开启">
        <el-switch
          v-model="formList.enVisible"
          active-value="1"
          inactive-value="0"
        />
      </el-form-item>
      <el-row type="flex" justify="center">
        <el-button type="primary" @click="addOk">确定</el-button>
        <el-button @click="handleClose">取消</el-button>
      </el-row>
    </el-form>
  </el-dialog>

</template>

<script>
import { AddlPermission, EditlPermission, DetailPermission, GetPermission } from '@/api/permission'
export default {
  props: {
    dialogShow: {
      type: Boolean,
      default: true
    },
    type: {
      type: Number,
      default: null
    },
    pid: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      formList: {
        name: '',
        code: '',
        description: '',
        enVisible: 0

      },
      rules: {
        name: [
          { required: true, message: '请输入权限名称', triggle: ['blur'] },
          {
            validator: async(rule, value, callback) => {
              let result = await GetPermission()
              if (this.formList.id) {
                result = result.filter(item => item.id !== this.formList.id)
              }
              if (result.some(item => item.code === value)) {
                callback(new Error('已经存在相同的权限标识'))
              } else {
                callback()
              }
            }
          }
        ],
        code: [
          { required: true, message: '请输入权限名称', triggle: ['blur'] },
          {
            validator: async(rule, value, callback) => {
              let result = await GetPermission()
              if (this.formList.id) {
                result = result.filter(item => item.id !== this.formList.id)
              }
              if (result.some(item => item.code === value)) {
                callback(new Error('已经存在相同的权限标识'))
              } else {
                callback()
              }
            }
          }
        ],
        description: [
          { required: true, message: '请输入权限名称', triggle: ['blur'] }
        ]
      }
    }
  },
  computed: {
    showTitle() {
      return this.formList.id ? '编辑权限点' : '新增权限点'
    }
  },
  methods: {
    // 点击关闭需要做的事情1.表单清空；2.移出校验结果；3.通知父组件关闭对话框。
    handleClose() {
      this.formList = {
        name: '',
        code: '',
        description: '',
        value: true
      }
      this.$refs.formList.resetFields()
      // 给父元素传值，关闭对话框
      this.$emit('updata:dialogShow', false)
    },
    // 对话框确定功能---------------------
    async addOk() {
      // 表单校验通过再执行之后的
      await this.$refs.formList.validate()
      let msg = '新增'
      if (this.formList.id) {
        msg = '编辑'
        // 编辑
        await EditlPermission(this.formList)
      } else {
        // 添加
        await AddlPermission({ ...this.formList, type: this.type, pid: this.pid })
      }
      // 通知父组件更新页面
      this.$emit('updatePermission')
      // 添加成功提示信息
      this.$message.success(`${msg}成功`)
      // 关闭对话框
      this.handleClose()
    },
    // 编辑功能，数据回显
    async DetailPermission(id) {
      const res = await DetailPermission(id)
      this.formList = res
    }

  }
}
</script>
<style>
</style>

2.父组件引用子组件并进行传值

<template>
  <div class="container">
    <div class="app-container">
      <el-button type="primary" size="mini" @click="AddPermission(0,1)">添加权限</el-button>
      <el-table
        :data="permissionlist"
        row-key="id"
        style="width: 100%"
        default-expand-all
      >
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="code" label="标识" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="" label="操作" width="200">
          <template #default="{row}">
            <el-button v-if="row.type===1" type="text" size="mini" @click="AddPermission(row.id,2)">添加</el-button>
            <el-button type="text" size="mini" @click="editPermission(row.id)">编辑</el-button>
            <el-button type="text" size="mini" @click="Delpermissionlist(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 对话框-------------- -->
      <Addpermission
        ref="dialog"
        :dialog-show="dialogShow"
        :type="type"
        :pid="pid"
        @updata:dialogShow="dialogShow=$event"
        @updatePermission="GetPermissionlist"
      />
    </div>
  </div>
</template>
<script>
import { GetPermission, DelPermission } from '@/api/permission'
import { transListTotreeData } from '@/utils/index'
import Addpermission from './component/Addpermission.vue'
export default {
  name: 'Permission',
  components: {
    Addpermission
  },
  data() {
    return {
      permissionlist: [], // 权限列表
      dialogShow: false,
      type: null, // 添加类型一级还是二级
      pid: null // 当前行的id
    }
  },
  created() {
    this.GetPermissionlist()
  },
  methods: {
    // 初始获取列表渲染--------------------------
    async GetPermissionlist() {
      const res = await GetPermission()
      // 转成树形数组
      this.permissionlist = transListTotreeData(res, 0)
    },
    // 删除功能----------------------------------
    async Delpermissionlist(id) {
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 调取删除接口，并重新渲染，提示成功信息
        await DelPermission(id)
        this.GetPermissionlist()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 添加功能--------------------------------
    async AddPermission(pid, type) {
      this.dialogShow = true
      this.type = type
      this.pid = pid
    },
    // 编辑功能---------------------------------
    async editPermission(id) {
      //  先调用子组件的方法在编辑的时候数据回显，在执行弹框显示
      await this.$refs.dialog.DetailPermission(id)
      this.dialogShow = true
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container{
  padding:10px;
}
</style>

3.图片解说