<template> <a-card title="弹出子表示例" :bordered="false"> <!-- 【弹出子表大体思路】 1. 必须要有 click-row-show-sub-form 属性,如果该属性设为false,那么就不会弹出子表 2. 必须要有 sub-form 插槽,用于规定弹出子表的内容 3. highlight-current-row 属性可有可无,如果有则点击一行的时候,该行会背景色会常亮 --> <!-- 【弹出详细信息(既有主表的数据也有子表的)大体思路】 1. 必须要有 click-row-show-main-form 属性,如果该属性设为false,那么就不会弹出详细信息 2. 必须要有 main-form 插槽,用于规定弹出子表的内容 3. 可选 click-row-show-sub-form 属性,如果有该属性,就会显示子表,否者不显示 --> <j-vxe-table toolbar row-number row-selection highlight-current-row click-row-show-sub-form click-row-show-main-form :height="750" :loading="loading" :columns="columns" :dataSource="dataSource" @detailsConfirm="handleDetailsConfirm" > <!-- 主表单 --> <template v-slot:mainForm="{row}"> <template v-if="row"> <a-form-model ref="form2" :model="row" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" > <a-row :gutter="8"> <a-col :span="8"> <a-form-model-item label="ID" prop="id"> <a-input v-model="row.id" disabled/> </a-form-model-item> </a-col> <a-col :span="8"> <a-form-model-item label="序号" prop="num"> <a-input v-model="row.num"/> </a-form-model-item> </a-col> <a-col :span="8"> <a-form-model-item label="船名" prop="ship_name"> <a-input v-model="row.ship_name"/> </a-form-model-item> </a-col> <a-col :span="8"> <a-form-model-item label="呼叫" prop="call"> <a-input v-model="row.call"/> </a-form-model-item> </a-col> <a-col :span="8"> <a-form-model-item label="长" prop="len"> <a-input v-model="row.len"/> </a-form-model-item> </a-col> <a-col :span="8"> <a-form-model-item label="吨" prop="ton"> <a-input v-model="row.ton"/> </a-form-model-item> </a-col> <a-col :span="8"> <a-form-model-item label="付款方" prop="payer"> <a-input v-model="row.payer"/> </a-form-model-item> </a-col> <a-col :span="8"> <a-form-model-item label="数" prop="count"> <a-input v-model="row.count"/> </a-form-model-item> </a-col> <a-col :span="8"> <a-form-model-item label="公司" prop="company"> <a-input v-model="row.company"/> </a-form-model-item> </a-col> <a-col :span="8"> <a-form-model-item label="动向" prop="trend"> <a-input v-model="row.trend"/> </a-form-model-item> </a-col> </a-row> </a-form-model> </template> </template> <!-- 子表单 --> <template v-slot:subForm="{row}"> <template v-if="loadSubData(row)"> <j-vxe-table ref="subFormTable" height="auto" :max-height="350" :loading="subTable.loading" :columns="subTable.columns" :dataSource="subTable.dataSource" /> </template> </template> </j-vxe-table> </a-card> </template> <script> import {getAction} from '@api/manage' import {JVXETypes} from '@/components/jeecg/JVxeTable' // 弹出子表示例 export default { name: 'PopupSubTable', data() { return { loading: false, dataSource: [], columns: [ {key: 'num', title: '序号', width: '80px'}, {key: 'ship_name', title: '船名', width: '180px', type: JVXETypes.input}, {key: 'call', title: '呼叫', width: '80px'}, {key: 'len', title: '长', width: '80px'}, {key: 'ton', title: '吨', width: '120px'}, {key: 'payer', title: '付款方', width: '120px'}, {key: 'count', title: '数', width: '40px'}, { key: 'company', title: '公司', minWidth: '180px', // 是否点击显示详细信息 // 只有当前单元格不能编辑的时候才能生效 // 如果不设的话,点击就只弹出子表,不会弹出主表的详细信息 showDetails: true }, {key: 'trend', title: '动向', width: '120px'}, ], // 子表的信息 subTable: { currentRowId: null, loading: false, pagination: {current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0}, selectedRows: [], dataSource: [], columns: [ {key: 'dd_num', title: '调度序号', width: '120px'}, {key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input}, {key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input}, {key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input}, {key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input}, {key: 'port_area', title: '所属港区', minWidth: '120px', type: JVXETypes.input}, ], }, // 查询url地址 url: { getData: '/mock/vxe/getData', }, // 主表form表单字段 mainForm: { id: '', num: '', ship_name: '', call: '', len: '', ton: '', payer: '', count: '', company: '', trend: '', }, // form表单 col labelCol: {span: 4}, wrapperCol: {span: 20}, rules: { num: [ {required: true, message: '必须输入序号'}, ], }, } }, created() { this.loadData() }, methods: { log: console.log, // 加载数据 loadData() { // 封装查询条件 let formData = {pageNo: 1, pageSize: 30} // 调用查询数据接口 this.loading = true getAction(this.url.getData, formData).then(res => { if (res.success) { // 将查询的数据赋值给 dataSource this.dataSource = res.result.records // 重置选择 this.selectedRows = [] } else { this.$error({title: '主表查询失败', content: res.message}) } }).finally(() => { // 这里是无论成功或失败都会执行的方法,在这里关闭loading this.loading = false }) }, // 查询子表数据 loadSubData(row) { if (row) { // 这里一定要做限制,限制不能重复查询,否者会出现死循环 if (this.subTable.currentRowId === row.id) { return true } this.subTable.currentRowId = row.id let formData = {pageNo: 1, pageSize: 30, parentId: row.id} this.subTable.loading = true getAction(this.url.getData, formData).then(res => { if (res.success) { // 将查询的数据赋值给 dataSource this.subTable.dataSource = res.result.records } else { this.$error({title: '主表查询失败', content: res.message}) } }).finally(() => { // 这里是无论成功或失败都会执行的方法,在这里关闭loading this.subTable.loading = false }) return true } else { return false } }, // 详细信息里点了确认按钮 handleDetailsConfirm({row, $table, callback}) { console.log('保存的数据:', row) // 校验当前行 $table.validate(row).then((errMap) => { // 校验通过 if (!errMap) { // 校验子表,如果需要的话,可以操作下面这个对象: // this.$refs.subFormTable callback(true) this.loading = true setTimeout(() => { this.loading = false this.$message.success('保存成功') }, 1000) } else { callback(false) this.$message.warn('校验失败') } }) }, }, } </script> <style scoped> </style>