vue+element-ui，如何在新增的时候，弹出表格不显示里面的子表格，但是在修改的时候，弹出的修改表单显示里面的子表格？
问题描述
如下图是点击添加按钮的弹出表单，如何隐藏红色框住的部分，但是在点击修改按钮弹出的修改表单里，要显示这部分内容
目前代码展示，该如何加判断条件？
<!-- 配置管理-负载均衡 -->
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" class="container-top">
<bread-crumb />
<el-form-item prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="请输入搜索内容"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" class="button-search" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" class="button-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<div class="container-bottom">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:post:add']"
>添加负载均衡</el-button>
</el-col>
<!-- <el-col :span="1.5">
<el-button
type="primary"
plain
size="mini"
v-hasPermi="['system:post:add']"
>负载节点监控</el-button>
</el-col> -->
</el-row>
<el-table v-loading="loading" :data="upstreamList" @selection-change="handleSelectionChange" :height="tableHeight" style="background-color: transparent;" header-row-class-name="header-row-style">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="转发类型" align="center" prop="proxyType" >
<template slot-scope="scope">
{{ scope.row.proxyType == 0 ? "http/https" : "tcp/udp" }}
</template>
</el-table-column>
<el-table-column label="名称" align="center" prop="name" />
<el-table-column label="描述" align="center" prop="descr" />
<el-table-column label="策略" align="center" prop="tactics" >
<template slot-scope="scope">
{{ scope.row.tactics || "默认" }}
</template>
</el-table-column>
<el-table-column label="负载" align="center" prop="monitor" >
<template slot-scope="scope">
{{ scope.row.monitor == 0 ? "否" : "是" }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:post:edit']"
>编辑</el-button>
<el-button
class="del-btn"
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:post:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
<!-- 添加或修改负载均衡 -->
<el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="common-table">
<el-form-item label="转发类型" prop="proxyType">
<el-select v-model="form.proxyType" placeholder="请选择类别">
<el-option :key="0" label="http/https" :value="0"></el-option>
<!-- <el-option :key="1" label="tcp/udp" :value="1"></el-option> -->
</el-select>
</el-form-item>
<el-form-item label="描述" prop="descr">
<el-input type="textarea" v-model="form.descr" placeholder="请输入描述" />
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="负载策略" prop="tactics">
<el-select v-model="form.tactics" placeholder="请选择负载策略">
<el-option v-for="item in tacticsArry" :key="item.value" :label="item.name" :value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<div style="color: #999;margin-bottom: 20px;">
如果负载状态包含备用或停用,负载策略只能选择默认
</div>
</el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="addTableRow('', undefined)"
v-hasPermi="['system:post:add']"
>添加负载</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleBatchAdd"
v-hasPermi="['system:post:add']"
>批量添加负载</el-button>
</el-col>
<!-- <el-col :span="1.5">
<el-button
type="primary"
plain
size="mini"
v-hasPermi="['system:post:add']"
>设置额外参数</el-button>
</el-col> -->
</el-row>
<el-table
:data="formChildTable"
style="background-color: transparent;" header-row-class-name="header-row-style"
size="small"
ref="table"
>
<el-table-column :render-header="(h) => renderTableLabel(h, 'ip')" align="center" width="150">
<template slot-scope="scope">
<el-input
v-model="formChildTable[scope.$index].server"
:title="formChildTable[scope.$index].server"
/>
</template>
</el-table-column>
<el-table-column :render-header="(h) => renderTableLabel(h, '端口')" align="center" width="120">
<template slot-scope="scope">
<el-input-number
v-model="formChildTable[scope.$index].port"
:controls="false"
:title="formChildTable[scope.$index].port"
/>
</template>
</el-table-column>
<el-table-column label="权重" align="center" width="120">
<template slot-scope="scope">
<el-input-number
v-model="formChildTable[scope.$index].weight"
:controls="false"
:title="formChildTable[scope.$index].weight"
/>
</template>
</el-table-column>
<el-table-column label="最大失败次数" align="center" width="120">
<template slot-scope="scope">
<el-input-number
v-model="formChildTable[scope.$index].maxFails"
:controls="false"
:title="formChildTable[scope.$index].maxFails"
/>
</template>
</el-table-column>
<el-table-column label="最大连接数" align="center" width="120">
<template slot-scope="scope">
<el-input-number
v-model="formChildTable[scope.$index].maxConns"
:controls="false"
:title="formChildTable[scope.$index].maxConns"
/>
</template>
</el-table-column>
<el-table-column label="失败等待时间(s) " align="center" width="120">
<template slot-scope="scope">
<el-input-number
v-model="formChildTable[scope.$index].failTimeout"
:controls="false"
:title="formChildTable[scope.$index].failTimeout"
/>
</template>
</el-table-column>
<el-table-column label="状态策略" align="center" width="150">
<template slot-scope="scope">
<el-select v-model="formChildTable[scope.$index].status">
<el-option key="none" label="无" value="none"></el-option>
<el-option key="down" label="停用" value="down"></el-option>
<el-option key="backup" label="备用" value="backup"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="其他参数" align="center" width="120">
<template slot-scope="scope">
<el-input
v-model="formChildTable[scope.$index].param"
:title="formChildTable[scope.$index].param"
/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="80px">
<template slot-scope="scope">
<el-button
@click="deleteformTable(scope.$index)"
size="small"
type="text"
>删除</el-button>
</template>
</el-table-column>
</el-table>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="cancel">关闭</el-button>
</div>
</el-dialog>
<!-- 批量添加 -->
<el-dialog :title="title" :visible.sync="batchAddOpen" width="600px" append-to-body>
<el-row>
<el-col :span="3">IP端口：</el-col>
<el-col :span="21"><el-input type="textarea" rows="8" v-model="ipAndPort" placeholder="添加示例：10.10.10.1:1000,10.10.10.2:1000用逗号隔开，只支持IPV4" /></el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="batchSubmit">提交</el-button>
<el-button @click="() => this.batchAddOpen = false">关闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getUpstreamList, deleteUpstream, insertOrUpdateUpstream, getServerByUpstreamId, insertOrUpdateServer} from "@/api/confManager/loadBalance"
import breadCrumb from "@/components/Breadcrumb/index.vue"
import autoComputedH from '@/utils/mixins/autoComputedH'
export default {
name: "Upstream",
mixins: [autoComputedH],
dicts: ['sys_normal_disable'],
components: {
breadCrumb,
},
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 负载均衡表格数据
upstreamList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
batchAddOpen: false,
// 查询参数
queryParams: {
current: 1,
limit: 10,
keywords: undefined,
},
// 负载策略下拉框
tacticsArry: [
{name: '默认', value: ''},
{name: '会话保持(sticky)', value: 'sticky'},
{name: 'ip绑定(ip_hash)', value: 'ip_hash'},
{name: '最少连接(least_conn)', value: 'least_conn'},
{name: '最短时间(least_conn)', value: 'least_time'}
],
// 表单参数
form: {},
// 批量添加ip和端口号字段
ipAndPort: "",
formChildTable: [],
// 表单校验
rules: {
name: [
{ required: true, message: "名称不能为空", trigger: "change" }
],
},
containerTop: null,
};
},
created() {
this.getList();
},
methods: {
/** 查询岗位列表 */
getList() {
this.loading = true;
getUpstreamList(this.queryParams).then(response => {
this.upstreamList = response.obj.records;
this.total = response.obj.count;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
proxyType: 0,
name: "",
tactics: "",
descr: ""
};
this.formChildTable = []
this.resetForm("form");
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.postId)
this.single = selection.length!=1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加负载均衡";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const upstreamId = row.id || this.ids
getServerByUpstreamId({upstreamId}).then(response => {
this.formChildTable = response.obj;
this.open = true;
this.title = "修改负载均衡";
});
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(async valid => {
if (valid) {
if(this.formChildTable.some(item => !item.server || !item.port)) {
this.$modal.msgWarning("ip或者端口号不能为空");
return
}
if (this.form.id || this.formChildTable.id) {
await insertOrUpdateServer(this.formChildTable).then(response => {
})
insertOrUpdateUpstream(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
await insertOrUpdateServer(this.formChildTable).then(response => {
})
insertOrUpdateUpstream(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
batchSubmit() {
if(!this.ipAndPort) {
this.$modal.msgWarning("请输入ip端口");
return
}
this.ipAndPort.split(/[,，]/).forEach(element => {
this.addTableRow(element.split(/[:：]/)[0] || "", element.split(/[:：]/)[1] || undefined)
});
this.batchAddOpen = false;
},
/** 删除按钮操作 */
handleDelete(row) {
const upstreamId = row.id || this.ids;
this.$modal.confirm('是否确认该数据项？').then(function() {
return deleteUpstream({id: upstreamId});
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
renderTableLabel(h, label) {
return h('div', [
h('span', {
style: {
'font-size': '14px',
color: '#ff4949',
'margin-right': '4px'
}
}, '*'),
h('span', label)
])
},
deleteformTable(index) {
this.$modal.confirm('是否确认删除该信息?').then(function() {
}).then(() => {
this.formChildTable.splice(index, 1);
}).catch(() => {});
},
// 添加行
addTableRow(server, port) {
let row = {
server: server,
port: port,
weight: undefined,
failTimeout: undefined,
maxFails: undefined,
maxConns: undefined,
status: "none",
param: ""
}
this.formChildTable.push(row);
},
// 批量添加
handleBatchAdd() {
this.ipAndPort = "";
this.batchAddOpen = true;
this.title = "批量添加负载均衡";
}
}
};
</script>
<style scoped>
</style>
