vxe-table 实现嵌套子表格

一、功能说明

1.图1：表格主界面

说明：
1）新增：点击触发函数 addParent 添加父表格一行，并激活这行，实现新增后编辑行信息。激活效果见图2。
2）导出：点击触发函数 exportData，在控制台打印保存表格数据的变量 parentData。
3）删除：点击触发函数 deleteParent，删除当前行。
4）新增：点击触发函数 addChild，打开弹窗，在弹窗内填写数据。点击提交触发函数 submitEvent，在当前行下的子表格新增一行。弹窗效果见图3。

2.图2：新增父表格

说明：红框就是激活状态。

3.图3：新增子表格

4.图4：子表格

说明：
1）删除：点击触发函数 deleteChild，删除子表格当前一行。

二、代码实现

<template>
  <div class="box">
  
    <!-- 新增父表格行 -->
    <vxe-button content="新增" @click="addParent" style="margin:0 5px 5px 0"></vxe-button>
    <vxe-button content="导出" @click="exportData" style="margin-bottom:5px"></vxe-button>

    <vxe-table
      resizable
      border
      ref="xTable"
      :data="parentData"
      :edit-config="{trigger: 'click', mode: 'row'}"
      row-id="id"
    >
      <!-- 子表格 -->
      <vxe-column type="expand" width="80">
        <template #content="{ row:parentRow,rowIndex:parentIndex }">
          <vxe-table :data="parentRow.info">
            <vxe-column field="name" title="姓名"></vxe-column>
            <vxe-column field="age" title="年龄"></vxe-column>
            <vxe-column field="date" title="出生日期"></vxe-column>
            <vxe-column title="操作">
              <template #default="{ row ,rowIndex}">
                <vxe-button
                  status="primary"
                  type="text"
                  round
                  @click="deleteChild(row,rowIndex,parentIndex)"
                >删除</vxe-button>
              </template>
            </vxe-column>
          </vxe-table>
        </template>
      </vxe-column>
      
      <!-- 父表格列 -->
      <vxe-column field="name" title="姓名" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.name" type="text"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="phone" title="电话" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.phone" type="number"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="address" title="地址" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.address" type="text"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column title="操作">
        <template #default="{ row,rowIndex }">
          <vxe-button
            type="text"
            status="primary"
            @click="deleteParent(row,rowIndex)"
            style="margin:0 5px"
          >删除</vxe-button>
          <vxe-button type="text" status="primary" @click="addChild(row,rowIndex)">新增</vxe-button>
        </template>
      </vxe-column>
    </vxe-table>

    <!-- 新增子表格弹窗 -->
    <vxe-modal
      v-model="showEdit"
      title="新增"
      width="800"
      min-width="600"
      min-height="300"
      :loading="submitLoading"
      resize
      destroy-on-close
    >
      <template #default>
        <vxe-form :data="formData" title-align="right" title-width="100" @submit="submitEvent">
          <vxe-form-item field="name" title="Name" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.name" placeholder="请输入名称"></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="age" title="Age" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.age" type="number" placeholder="请输入年龄"></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="date" title="Date" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.date" type="date" placeholder="请选择日期" transfer></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item align="center" title-align="left" :span="24">
            <template #default>
              <vxe-button type="submit">提交</vxe-button>
              <vxe-button type="reset">重置</vxe-button>
            </template>
          </vxe-form-item>
        </vxe-form>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import axios from 'axios'
import VXETable from 'vxe-table'

export default {
  data() {
    return {
      parentData: [], // 父表格
      showEdit: false, // 创建子表格对话框
      submitLoading: false, // 对话框提交加载
      formData: { // 对话框表单数据
        name: null,
        age: null,
        date: null,
      },
      addChildRowIndex: null // 触发对话框的行索引
    }
  },
  created() {
    this.getParentData()
  },
  methods: {
    async getParentData() {
      const res = await axios.get('http://127.0.0.1:4523/m1/1552165-0-default/user/list')
      this.parentData = res.data.list
    },
    addParent() {
      let obj = {
        name: null,
        address: null,
        phone: null,
        info: {
          name: null,
          age: null,
          date: null,
        }
      }
      this.parentData.push(obj)
      const $table = this.$refs.xTable
      $table.setActiveRow(obj)
      VXETable.modal.message({ content: '新增成功', status: 'success' })
    },
    exportData() {
      console.log(this.parentData);
    },
    deleteParent(row, rowIndex) {
      this.parentData.splice(rowIndex, 1)
      VXETable.modal.message({ content: '删除成功', status: 'success' })
    },
    addChild(row, rowIndex) {
      this.addChildRowIndex = rowIndex
      this.showEdit = true
    },
    submitEvent() {
      this.submitLoading = true
      setTimeout(() => {
        this.submitLoading = false
        this.showEdit = false
        this.parentData[this.addChildRowIndex].info.push(this.formData)
        this.formData = {
          name: null,
          age: null,
          date: null,
        }
        this.addChildRowIndex = null
        VXETable.modal.message({ content: '新增成功', status: 'success' })
      }, 500)
    },
    deleteChild(row, rowIndex, parentIndex) {
      this.parentData[parentIndex].info.splice(rowIndex, 1)
      VXETable.modal.message({ content: '删除成功', status: 'success' })
    }
  }
}
</script>

<style>
.box {
  padding: 50px;
}
</style>