Table of contents
1. Function Description
1. Figure 1: Table main interface
Instructions:
1) Add: Click the trigger functionaddParentto add a row in the parent table, and activate this row, so as to edit the row information after adding. The activation effect is shown in Figure 2.
2) Export: Click the trigger functionexportDatato print the variables that save the table data on the consoleparentData.
3) Delete: Click to trigger the functiondeleteParentto delete the current row.
4) New: Click the trigger functionaddChildto open the pop-up window and fill in the data in the pop-up window. Click Submit to trigger the functionsubmitEventand add a new row in the subtable under the current row. The effect of the pop-up window is shown in Figure 3.
2. Figure 2: New parent table
Note: The red box is the active state.
3. Figure 3: Add subtable
4. Figure 4: Subtable
Instructions:
1) Delete: Click to trigger the functiondeleteChildto delete the current row of the subtable.
2. Code implementation
<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>