vue+element-ui，新增表格内的el-row和el-col的间距样式该如何调整？
问题描述
如下图所示，①如何让三个checkbox:default、proxy protocol、同时监听，向左移动和监听ip端口label对齐？②如何让选择内置证书按钮向右移动，位于居中靠左的位置？③如何让左侧部分和右侧部分中间有间隔
代码展示
<!-- 配置管理-反向代理 -->
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="75px" 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="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:post:remove']"
>批量删除</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</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="handleAdd"
v-hasPermi="['system:post:add']"
>添加反向代理</el-button>
</el-col>
</el-row>
<el-table v-loading="loading" :data="postList" @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" :formatter="formatter"/>
<el-table-column label="监听ip端口" align="center" prop="listen" />
<el-table-column label="监听域名" align="center" prop="serverName" />
<el-table-column label="ssl选项 " align="center" prop="ssl" :formatter="formatterSsl"/>
<el-table-column label="停用启用" align="center" width="100">
<template slot-scope="scope">
<el-switch
v-model="scope.row.enable"
active-value="true"
inactive-value="false"
></el-switch>
</template>
</el-table-column>
<el-table-column label="描述" align="center" prop="descr" />
<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.current"
:limit.sync="queryParams.limit"
@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="110px" class="container-bottom">
<el-row>
<el-col :span="9">
<el-form-item label="转发类型" prop="proxyType">
<el-select v-model="form.proxyType" placeholder="请选择类别">
<el-option
v-for="dict in proxyTypeOptions"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="15">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="addTableRow"
v-hasPermi="['system:post:add']"
>选择内置证书</el-button>
</el-col>
</el-row>
<el-row>
<el-col :span="9">
<el-form-item label="监听ip端口" prop="listen">
<el-input v-model="form.listen" placeholder="请输入监听ip端口" />
</el-form-item>
</el-col>
<el-col :span="9">
<el-form-item label="pem文件路径" prop="listen">
<el-input v-model="form.listen" placeholder="请输入监听ip端口" />
</el-form-item>
</el-col>
<el-col :span="3">
<el-button
type="primary"
plain
size="mini"
v-hasPermi="['system:post:add']"
>上传pem文件</el-button>
</el-col>
<el-col :span="3">
<el-button
type="primary"
plain
size="mini"
v-hasPermi="['system:post:add']"
>选择已有文件</el-button>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="监听域名" prop="serverName">
<el-input v-model="form.serverName" placeholder="例:www.baidu.com" />
</el-form-item>
</el-col> -->
</el-row>
<el-row>
<el-col :span="3">
<el-form-item prop="def">
<el-checkbox v-model="form.def" true-label="1" false-label="0">default</el-checkbox>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item prop="proxyProtocol">
<el-checkbox v-model="form.proxyProtocol" true-label="1" false-label="0">proxy protocol</el-checkbox>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item prop="ipv6">
<el-checkbox v-model="form.ipv6" true-label="1" false-label="0">同时监听IPv6</el-checkbox>
</el-form-item>
</el-col>
<el-col :span="9">
<el-form-item label="key文件路径" prop="listen">
<el-input v-model="form.listen" placeholder="请输入监听ip端口" />
</el-form-item>
</el-col>
<el-col :span="3">
<el-button
type="primary"
plain
size="mini"
v-hasPermi="['system:post:add']"
>上传key文件</el-button>
</el-col>
<el-col :span="3">
<el-button
type="primary"
plain
size="mini"
v-hasPermi="['system:post:add']"
>选择已有文件</el-button>
</el-col>
</el-row>
<el-row>
<el-col :span="9">
<el-form-item label="监听域名" prop="serverName">
<el-input v-model="form.serverName" placeholder="例:www.baidu.com" />
</el-form-item>
</el-col>
<el-col :span="15">
<el-form-item label="开启http2" prop="serverName">
<el-input v-model="form.serverName" placeholder="例:www.baidu.com" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="9">
<el-form-item v-if="form.proxyType == 0" label="选择密码文件" prop="passwordId">
<el-select v-model="form.passwordId" placeholder="请选择密码文件">
<el-option :key="0" label="--不使用密码--" :value="0"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="15">
<el-form-item label="ssl协议版本" prop="passwordId">
<el-select v-model="form.passwordId" placeholder="请选择密码文件">
<el-option :key="0" label="--不使用密码--" :value="0"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<!-- <el-col :span="12">
<el-form-item v-if="form.proxyType !== 0" label="指向负载均衡" prop="passwordId">
<el-select v-model="form.passwordId" placeholder="请选择密码文件">
<el-option :key="0" label="测试100" :value="0"></el-option>
</el-select>
</el-form-item>
</el-col> -->
<el-col :span="9">
<el-form-item label="开启ssl" prop="ssl">
<el-select v-model="form.ssl" placeholder="请选择是否开启ssl">
<el-option
v-for="dict in options"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="http跳转https" prop="ssl">
<el-select v-model="form.ssl" placeholder="请选择是否开启ssl">
<el-option
v-for="dict in options"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="从该端口跳转" prop="ssl">
<el-select v-model="form.ssl" placeholder="请选择是否开启ssl">
<el-option
v-for="dict in options"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</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"
v-hasPermi="['system:post:add']"
v-if="form.proxyType == 0"
>添加代理目标(Location)</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
size="mini"
@click="handleIpList"
v-hasPermi="['system:post:add']"
>IP黑白名单</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-if="form.proxyType == 0"
:data="formChildTable"
style="background-color: transparent;" header-row-class-name="header-row-style"
size="small"
ref="table"
>
<el-table-column label="监控路径" align="center" width="150">
<template slot-scope="scope">
<el-input
v-model="formChildTable[scope.$index].path"
/>
</template>
</el-table-column>
<el-table-column label="代理类型" align="center" width="150">
<template slot-scope="scope">
<el-select v-model="formChildTable[scope.$index].type">
<el-option key="0" label="动态代理" value="动态代理"></el-option>
<el-option key="1" label="静态代理" value="静态代理"></el-option>
<el-option key="2" label="负载均衡" value="负载均衡"></el-option>
<el-option key="3" label="空白代理" value="空白代理"></el-option>
<el-option key="4" label="重定向" value="重定向"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="代理目标" width="740">
<template slot-scope="scope" >
<el-input
style="width:200px;margin-right:10px"
v-model="formChildTable[scope.$index].value"
/>
<el-checkbox v-model="formChildTable[scope.$index].websocket" :true-label="1" :false-label="0">websocket</el-checkbox>
<el-checkbox v-model="formChildTable[scope.$index].cros" :true-label="1" :false-label="0">跨域</el-checkbox>
<el-checkbox v-model="formChildTable[scope.$index].header" :true-label="1" :false-label="0">Host参数：</el-checkbox>
<el-select v-model="formChildTable[scope.$index].headerHost" style="width:180px">
<el-option key="0" label="$host" value="0"></el-option>
<el-option key="1" label="$http_host" value="1"></el-option>
<el-option key="2" label="$host:$proxy_port" value="2"></el-option>
<el-option key="3" label="$host:$server_port" value="3"></el-option>
</el-select>
</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>
<!-- IP黑白名单 -->
<el-dialog :title="title" :visible.sync="ipListOpen" width="600px" append-to-body>
<el-row>
<el-col :span="5">黑白名单模式</el-col>
<el-col :span="19">
<el-select v-model="form.denyAllow" placeholder="请选择黑白名单模式">
<el-option
v-for="dict in ipOptions"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="() => this.ipListOpen = false">关闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getServerList,delServer,insertOrUpdateServer,getServerId,insertOrUpdateLocation,delLocation} from "@/api/confManager/reverseProxy";
import breadCrumb from "@/components/Breadcrumb/index.vue"
import autoComputedH from '@/utils/mixins/autoComputedH'
export default {
name: "Post",
mixins: [autoComputedH],
dicts: ['sys_normal_disable'],
components: {
breadCrumb,
},
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 岗位表格数据
postList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
current: 1,
limit: 10,
keywords: undefined,
},
// 表单参数
form: {},
formChildTable: [],
ipListOpen:false,
//开启ssl下拉框数据
options: [
{
value: 0,
label: "否",
},
{
value: 1,
label: "是",
},
],
//ip黑白名单模式下拉框
ipOptions: [
{
value: 0,
label: "正常模式",
},
{
value: 1,
label: "黑名单模式",
},
{
value: 2,
label: "白名单模式",
},
{
value: 3,
label: "黑白名单模式",
},
],
//转发类型下拉框数据
proxyTypeOptions:[
{
value: 0,
label: "http",
},
{
value: 1,
label: "tcp",
},
{
value: 2,
label: "udp",
}
],
methods: {
</script>
