可复用嵌套表格的Dialog

<template>
  <div>
    <el-dialog :title="content.dialogtitle" :visible.sync="content.dialogTableVisible">
      <el-button size="" type="primary" icon="el-icon-plus" @click="handleAdd()">新增</el-button>
      <el-table :data="content.data" style="margin-top:20px">
        <el-table-column property="name" label="扩展名称" width=""></el-table-column>
        <el-table-column property="code" label="扩展编码" width="200"></el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="260">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:edit']">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-view" @click="handleWatch(scope.row)">查看</el-button>
            <el-button size=" mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']" v-if="scope.row.pid != 0">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="content.total>0" :total="content.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import { addApi, editApi, removeApi } from '@/api/system/dept/api.js'
export default {
  /* 
     dialogTableVisible 弹窗标志位
     dialogtitle        弹窗标题
     data               表格数据
     total              分页
    */
  props: {
    content: {
      type: Object
    }
  },
  data () {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 30
      },
    };
  },
  methods: {
    getList () {
      this.$emit("handleWatch", this.content.currentRow, this.queryParams)
    },
    handleAdd () { },
    handleUpdate () { },
    handleDelete (row) {
      this.$modal.confirm('是否确认删除该数据项？').then(function () {
        return removeApi(row.mid);
      }).then(() => {
        this.$emit("handleWatch", this.content.currentRow, this.queryParams)
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
  },
};
</script>