子组件

<template>
  <div>
    <!-- 查询模块 -->
    <div class="select-content">
      <span>姓名：</span>
      <h-input
        v-model="searchName"
        placeholder="请输入姓名"
        style="width: 300px"
      ></h-input>
    </div>
    <div class="btn-content">
      <h-button type="info" @click="addClick">添加按钮</h-button>
      <h-button type="success" @click="updateClick">修改按钮</h-button>
      <h-button type="error" @click="deleteInfo">删除按钮</h-button>
      <h-button type="warning" @click="searchClick">查询按钮</h-button>
    </div>
    <h-table
      border
      :columns="tableColumns"
      :data="nowPageList"
      no-data-text="没有数据了"
      @on-selection-change="selectChange"
    ></h-table>
    <!--分页组件-->
    <div class="page-wrapper">
      <h-page
        :total="tableData.length"
        :current="currentPage"
        :page-size="pageSize"
        show-elevator
        @on-change="handleCurrentChange"
        show-total
      ></h-page>
    </div>
    <div>
      <!-- 添加弹框 -->
      <edit-dialog
        :dialogVisible.sync="dialogVisible"
        :tableFormData="tableForm"
        @beforeOkClose="beforeOkClose"
      />
    </div>
  </div>
</template>
<script>
let oldData = [
  {
    id: 0,
    name: '王小明',
    age: '11',
    address: '北京市朝阳区芍药居',
  },
  {
    id: 1,
    name: '张小刚',
    age: '25',
    address: '北京市海淀区西二旗',
  },
  {
    id: 2,
    name: '李小红',
    age: '30',
    address: '上海市浦东新区世纪大道',
  },
  {
    id: 3,
    name: '周小伟',
    age: '26',
    address: '深圳市南山区深南大道',
  },
  {
    id: 4,
    name: '王小明',
    age: '18',
    address: '北京市朝阳区芍药居',
  },
  {
    id: 5,
    name: '张小刚',
    age: '25',
    address: '北京市海淀区西二旗',
  },
  {
    id: 6,
    name: '李小红',
    age: '30',
    address: '上海市浦东新区世纪大道',
  },
  {
    id: 7,
    name: '周小伟',
    age: '26',
    address: '深圳市南山区深南大道',
  },
  {
    id: 8,
    name: '王小明',
    age: '18',
    address: '北京市朝阳区芍药居',
  },
  {
    id: 9,
    name: '张小刚',
    age: '25',
    address: '北京市海淀区西二旗',
  },
  {
    id: 10,
    name: '李小红',
    age: '30',
    address: '上海市浦东新区世纪大道',
  },
  {
    id: 11,
    name: '周小伟',
    age: '26',
    address: '深圳市南山区深南大道',
  },
  {
    id: 12,
    name: '周小伟',
    age: '26',
    address: '深圳市南山区深南大道',
  },
]
let columns = [
  {
    type: 'selection',
    width: 60,
    align: 'center',
  },
  {
    title: '姓名',
    key: 'name',
  },
  {
    title: '年龄',
    key: 'age',
  },
  {
    title: '地址',
    key: 'address',
  },
]
import EditDialog from '@/components/EditDialog.vue'
export default {
  components: {
    EditDialog,
  },
  computed: {
    nowPageList() {
      let begin = (this.currentPage - 1) * this.pageSize
      let end = this.currentPage * this.pageSize
      return this.tableData.slice(begin, end)
    },
  },
  data() {
    return {
      tableColumns: columns,
      currentPage: 1,
      pageSize: 5,
      // 修改弹框
      dialogVisible: false,
      updateInfo: [],
      searchName: '',
      tableForm: {
        name: '',
        age: '',
        address: '',
      },
      tableData: JSON.parse(JSON.stringify(oldData)),
    }
  },
  methods: {
    addClick() {
      this.dialogVisible = true
      this.tableForm = {}
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    onBackFirstPage() {
      this.currentPage = 1
      this.checkedListIds = [];
      //
    },
    searchClick() {
      if (this.searchName) {
        this.tableData = oldData.filter((item) => {
          return item.name === this.searchName
        })
      } else {
        this.tableData = oldData
      }
    },
    updateClick() {
      if (!this.updateInfo.length) {
        this.$hMessage.error('请最少选一条数据进行修改！')
      } else if (this.updateInfo.length > 1) {
        this.$hMessage.error('只能选择一条数据进行修改！')
      } else {
        this.dialogVisible = true
        // localStorage.setItem('obj', JSON.stringify(this.updateInfo[0]))
        this.tableForm = JSON.parse(JSON.stringify(this.updateInfo[0]))
      }
    },
    deleteInfo() {
      if (!this.updateInfo.length) {
        this.$hMessage.error('请最少选一条数据进行删除！')
      } else {
        this.$hMsgBox.confirm({
          title: '此操作会删除数据，是否删除？',
          onOk: () => {
            // 删除数据
            this.updateInfo.forEach(ele => {
              oldData.splice(oldData.findIndex(d => d.id === ele.id));
            });
            this.onBackFirstPage()
          },
          onCancel: () => {
            this.$hMessage.info('点击了取消')
          },
        })
      }
    },
    beforeOkClose(isAdd, form) {
      if (isAdd) {
        form.id = this.tableData.length + 1
        this.tableData.splice(0, 0, form)
      } else {
        this.tableData = this.tableData.map((item) => {
          if (item.id === form.id) {
            item = form
          }
          return item
        })
      }
      this.onBackFirstPage();
    },
    selectChange(selection, selectInx) {
      this.updateInfo = selection
    },
  },
}
</script>
<style lang="scss" scoped>
.select-content {
  display: flex;
  align-items: center;
  .h-input-wrapper {
    margin-right: 60px;
  }
}
.btn-content {
  display: flex;
  .h-btn {
    margin: 20px 20px 20px 0;
  }
}
.page-wrapper {
  padding: 30px;
  display: flex;
  justify-content: flex-end;
}
</style>

 父组件

<template>
    <!-- 添加|修改 弹框 -->
    <h-msg-box v-model="boolShow" :title="isAdd ? '新增' : '修改'" :beforeOkClose="beforeOkClose">
      <h-form
        ref="tableForm"
        :model="tableFormData"
        :label-width="80"
        :rules="tableRule"
      >
        <h-form-item label="姓名" prop="name">
          <h-input v-model="tableFormData.name" placeholder="请输入姓名"></h-input>
        </h-form-item>
        <h-form-item label="年龄" prop="age">
          <h-input v-model="tableFormData.age" placeholder="请输入年龄"></h-input>
        </h-form-item>
        <h-form-item label="地址" prop="address">
          <h-input
            v-model="tableFormData.address"
            placeholder="请输入地址"
          ></h-input>
        </h-form-item>
      </h-form>
    </h-msg-box>
</template>

<script>
export default {
  name: 'EditDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    tableFormData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  computed: {
    boolShow: {
      set: function (val) {
        this.$emit('update:dialogVisible', val)
      },
      get: function () {
        return this.dialogVisible
      },
    },
    isAdd(){
      return !this.tableFormData.id;
    }
  },
  data() {
    return {
      tableForm: {},
      tableRule: {
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        age: [{ required: true, message: '年龄不能为空', trigger: 'blur' }],
        address: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
      },
    }
  },
  methods: {
    beforeOkClose() {
      return new Promise((resolve, reject) => {
        this.$refs['tableForm'].validate((valid) => {
          if (valid) {
            setTimeout(() => {
              this.$hMessage.success('提交成功!')
              this.$emit('beforeOkClose', this.isAdd , this.tableFormData)
              this.currentPage = 1
              resolve(true)
            }, 1000)
          } else {
            reject(false)
            this.$hMessage.error('有必填项没有填!')
          }
        })
      })
    },
  },
}
</script>

<style>
</style>