<el-form-item :label="$t('config.forwardPart')" prop="sendPart"> <template #label> <span>全部转发</span> </template> <el-radio-group v-model="analysisState.formData.sendPart" class="w-320"> <el-radio label="Y">是</el-radio> <el-radio label="N">否</el-radio> </el-radio-group> </el-form-item> <el-form-item :label="'日志源IP'" prop="serverIp"> <el-input class="w-320" v-model="analysisState.formData.sourceIp" placeholder="请输入日志源IP" clearable /> </el-form-item> 当上面选是时 隐藏日志源ip怎么做到

时间: 2024-02-06 11:02:53 浏览: 166
您可以通过在 `el-form-item` 元素上绑定 `v-if` 或 `v-show` 指令来实现当选中“是”时隐藏“日志源IP”输入框的效果。示例代码如下: ``` <el-form-item :label="$t('config.forwardPart')" prop="sendPart"> <template #label> <span>全部转发</span> </template> <el-radio-group v-model="analysisState.formData.sendPart" class="w-320"> <el-radio label="Y">是</el-radio> <el-radio label="N">否</el-radio> </el-radio-group> </el-form-item> <el-form-item :label="'日志源IP'" prop="serverIp" v-if="analysisState.formData.sendPart === 'N'"> <el-input class="w-320" v-model="analysisState.formData.sourceIp" placeholder="请输入日志源IP" clearable /> </el-form-item> ``` 在这个示例中,我们在“日志源IP”输入框的 `el-form-item` 元素上绑定了 `v-if` 指令,判断 `analysisState.formData.sendPart` 是否等于 `N`,如果是则显示该输入框,否则隐藏该输入框。
阅读全文

相关推荐

<template> <a-card :bordered="false"> <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form"> <a-row :gutter="24"> <a-col :span="6"> <a-form-item label="名称" name="username"> <a-input v-model:value="searchFormState.username" placeholder="请输入名称" /> </a-form-item> </a-col> <a-col :span="6"> <a-form-item label="身份证号" name="identityNo"> <a-input v-model:value="searchFormState.identityNo" placeholder="请输入身份证号" /> </a-form-item> </a-col> <a-col :span="6"> <a-form-item label="语言" name="language"> <a-input v-model:value="searchFormState.language" placeholder="请输入语言" /> </a-form-item> </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="信用分,默认100分" name="creditScore"> <a-input v-model:value="searchFormState.creditScore" placeholder="请输入信用分,默认100分" /> </a-form-item> </a-col> <a-col :span="6"> <a-button type="primary" @click="tableRef.refresh()">查询</a-button> <a-button style="margin: 0 8px" @click="reset">重置</a-button> {{ advanced ? '收起' : '展开' }} <component :is="advanced ? 'up-outlined' : 'down-outlined'"/> </a-col> </a-row> </a-form> <s-table ref="tableRef" :columns="columns" :data="loadData" :alert="options.alert.show" bordered :row-key="(record) => record.passengerId" :tool-config="toolConfig" :row-selection="options.rowSelection" > <template #operator class="table-operator"> <a-space> <a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('opsPassengerAdd')"> <template #icon></template> 新增 </a-button> <xn-batch-button v-if="hasPerm('opsPassengerBatchDelete')" buttonName="批量删除" icon="DeleteOutlined" buttonDanger :selectedRowKeys="selectedRowKeys" @batchCallBack="deleteBatchOpsPassenger" /> </a-space> </template> <template #bodyCell="{ column, record }"> <template v-if="column.dataIndex === 'action'"> <a-space> 编辑 <a-divider type="vertical" v-if="hasPerm(['opsPassengerEdit', 'opsPassengerDelete'], 'and')" /> <a-popconfirm title="确定要删除吗?" @confirm="deleteOpsPassenger(record)"> <a-button type="link" danger size="small" v-if="hasPerm('opsPassengerDelete')">删除</a-button> </a-popconfirm> </a-space> </template> </template> </s-table> </a-card> <Form ref="formRef" @successful="tableRef.refresh()" /> </template> <script setup name="passenger"> import { cloneDeep } from 'lodash-es' import Form from './form.vue' import opsPassengerApi from '@/api/ops/opsPassengerApi' const searchFormState = ref({}) const searchFormRef = ref() const tableRef = ref() const formRef = ref() const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false } // 查询区域显示更多控制 const advanced = ref(false) const toggleAdvanced = () => { advanced.value = !advanced.value } const columns = [ { title: '名称', dataIndex: 'username' }, { title: '联系方式', dataIndex: 'mobile' }, { title: '累计消费金额', dataIndex: 'accumulatedConsumption' }, { title: '消费次数', dataIndex: 'cumulativeNumber' }, { title: '状态', dataIndex: 'userStatus' }, { title: '上一次消费时间', dataIndex: 'lastConsumption' }, ] // 操作栏通过权限判断是否显示 if (hasPerm(['opsPassengerEdit', 'opsPassengerDelete'])) { columns.push({ title: '操作', dataIndex: 'action', align: 'center', width: 150 }) } const selectedRowKeys = ref([]) // 列表选择配置 const options = { // columns数字类型字段加入 needTotal: true 可以勾选自动算账 alert: { show: true, clear: () => { selectedRowKeys.value = ref([]) } }, rowSelection: { onChange: (selectedRowKey, selectedRows) => { selectedRowKeys.value = selectedRowKey } } } const loadData = (parameter) => { const searchFormParam = cloneDeep(searchFormState.value) return opsPassengerApi.opsPassengerPage(Object.assign(parameter, searchFormParam)).then((data) => { return data }) } // 重置 const reset = () => { searchFormRef.value.resetFields() tableRef.value.refresh(true) } // 删除 const deleteOpsPassenger = (record) => { let params = [ { passengerId: record.passengerId } ] opsPassengerApi.opsPassengerDelete(params).then(() => { tableRef.value.refresh(true) }) } // 批量删除 const deleteBatchOpsPassenger = (params) => { opsPassengerApi.opsPassengerDelete(params).then(() => { tableRef.value.clearRefreshSelected() }) } </script> 寻找前端列表渲染操作

大家在看

recommend-type

W5500模块-客户端模式例程.zip

基于W5500模块的客户端代码资料
recommend-type

UML2.0设计手册.pdf

精简,概要的说明如何在uml2.0下进行建模设计
recommend-type

200402Step7_hsps.zip

硬件配置中用于安装硬件更新的 STEP 7 V5.x 硬件支持包 (HSP - 自 2020 年 02) 描述 附件中是可供下载的 STEP 7 的最新硬件支持包。 通过该硬件支持包可以组态 STEP 7 安装文件硬件目录中未包含的模块。 对于 STEP 7 V5.2 及更高版本,可以通过该硬件支持包来更新硬件目录。 关于如何使用本下载文件更新 STEP 7 硬件目录的操作步骤。 下载“STEP7_HSP.zip”文件,以获得下载文件中所包含的硬件支持包列表。然后解压该 Zip 文件,并通过 Internet 浏览器打开其中包含的“HSP_Viewer.html”文件。
recommend-type

IEC 61400-25风力发电标准-英文版

IEC61400风电国际标准,分为5个部分,内容包括总则、模型、通信协议、风机构成与控制等。
recommend-type

《Comsol模拟中多孔介质传热相变现象研究-内嵌相变颗粒材料影响与模型复现探讨》,COMSOL多孔介质传热相变研究:内嵌相变颗粒材料与空气域热传导效果的对比分析-基于二维与三维加热方式的研究,c

《Comsol模拟中多孔介质传热相变现象研究——内嵌相变颗粒材料影响与模型复现探讨》,COMSOL多孔介质传热相变研究:内嵌相变颗粒材料与空气域热传导效果的对比分析——基于二维与三维加热方式的研究,comsol多孔介质传热相变,内嵌相变颗粒材料,comsollunwen复现,模型复现。 二维三维均可,从下侧和上侧加热的对比存在相变颗粒和空气域的热传导效果。 ,comsol;多孔介质传热相变;内嵌相变颗粒材料;comsollunwen复现;模型复现;热传导效果对比,COMSOL多孔介质内相变颗粒传热模型复现研究

最新推荐

recommend-type

vue+vuex+axios实现登录、注册页权限拦截

&lt;el-form-item prop="name"&gt; &lt;span class="svg-container svg-container_login"&gt; &lt;svg-icon icon-class="user"/&gt; &lt;/span&gt; &lt;el-input name="name" disabled type="text" v-model="loginForm.name" autoComplete=...
recommend-type

一种典型基于社交网站的正面宣传方案.docx

一种典型基于社交网站的正面宣传方案.docx
recommend-type

大数据应用案例分析.doc

大数据应用案例分析.doc
recommend-type

网络安全考点.doc

网络安全考点.doc
recommend-type

系统集成项目经理继续教育-推荐课程1题库.doc

系统集成项目经理继续教育-推荐课程1题库.doc
recommend-type

Delphi实现U盘自动运行防护源码解析

Delphi是一种高级的、结构化的编程语言,它非常适合快速开发各种类型的应用程序。它由一家名为Borland的公司最初开发,后来Embarcadero Technologies接管了它。Delphi的特点是其强大的可视化开发环境,尤其是对于数据库和Windows应用程序的开发。它使用的是Object Pascal语言,结合了面向对象和过程式编程的特性。 当涉及到防自动运行源码时,Delphi可以实现一些功能,用以阻止病毒利用Windows的自动运行机制来传播。自动运行(AutoRun)功能允许操作系统在插入特定类型的媒体(如U盘、移动硬盘)时自动执行程序。这对于病毒来说是一个潜在的攻击向量,因为病毒可能隐藏在这些媒体上,并利用AutoRun功能自动执行恶意代码。 在Delphi中实现防自动运行的功能,主要是通过编程监测和控制Windows注册表和系统策略来达到目的。自动运行功能通常与Windows的注册表项“HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Policies\Explorer”以及“HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\Explorer”相关联。通过修改或锁定这些注册表项,可以禁用自动运行功能。 一种常见的方法是设置“NoDriveTypeAutoRun”注册表值。这个值可以被设置为一个特定的数字,这个数字代表了哪些类型的驱动器不会自动运行。例如,如果设置了“1”(二进制的00000001),则系统会阻止所有非CD-ROM驱动器的自动运行。 除了直接修改注册表,还可以通过编程方式使用Windows API函数来操作这些设置。Delphi提供了直接调用Windows API的机制,它允许开发者调用系统底层的功能,包括那些与注册表交互的功能。 同时,Delphi中的TRegistry类可以简化注册表操作的复杂性。TRegistry类提供了简单的接口来读取、写入和修改Windows注册表。通过这个类,开发者可以更加便捷地实现禁用自动运行的功能。 然而,需要注意的是,单纯依赖注册表级别的禁用自动运行并不能提供完全的安全保障。病毒和恶意软件作者可能会发现绕过这些限制的新方法。因此,实现多重防护措施是很重要的,比如使用防病毒软件,定期更新系统和安全补丁,以及进行安全意识教育。 此外,为了确保源码的安全性和有效性,在使用Delphi编程实现防自动运行功能时,应遵循最佳编程实践,例如对代码进行模块化设计,编写清晰的文档,以及进行彻底的测试,确保在不同的系统配置和条件下都能稳定运行。 总结来说,使用Delphi编写防自动运行源码涉及对Windows注册表和系统策略的控制,需要良好的编程习惯和安全意识,以构建既安全又可靠的解决方案。在文件名称列表中提到的“Delphi防自动运行源码”,可能就是一个实现了上述功能的Delphi项目文件。
recommend-type

【性能测试基准】:为RK3588选择合适的NVMe性能测试工具指南

# 1. NVMe性能测试基础 ## 1.1 NVMe协议简介 NVMe,全称为Non-Volatile Memory Express,是专为固态驱动器设计的逻辑设备接口规范。与传统的SATA接口相比,NVMe通过使用PCI Express(PCIe)总线,大大提高了存储设备的数据吞吐量和IOPS(每秒输入输出操作次数),特别适合于高速的固态存储设备。
recommend-type

如果有外码,定义各基本表外码。

### 如何在数据库中定义包含外码的基本表 在外键存在的场景下,定义基本表的外键关系是为了确保两个表之间的数据一致性和参照完整性。以下是关于如何定义外键关系的具体说明: #### 定义外键的基本语法 外键可以通过 `ALTER TABLE` 或者创建表时直接指定的方式进行定义。以下是一般情况下定义外键的 SQL 语法[^5]: ```sql CREATE TABLE 子表 ( 列名1 数据类型, 列名2 数据类型, ... CONSTRAINT 外键名称 FOREIGN KEY (子表列名) REFERENCES 主表(主表列名) ); ``` 如果是在已
recommend-type

F-FTP开源资源下载器:自动下载、续传与暂停功能

标题中提到的“F-FTP资源下载工具(开源)”指向了一款针对文件传输协议(FTP)的资源下载工具。FTP是一种用于在网络上进行文件传输的标准协议,它允许用户将文件从一台计算机传输到另一台计算机上。开源意味着该工具的源代码是公开的,意味着用户和开发者都可以自由地查看、修改和分发该软件。 根据描述,“自动下载FTP资源工具,支持续传,支持暂停,个人作品,没事写来玩玩。”我们可以提取以下知识点: 1. 自动下载功能:这款工具具备自动化下载的能力,用户无需手动选择和下载文件。它可能具备自动搜索FTP服务器上的资源、自动排队下载和自动处理错误等功能。 2. 续传功能:FTP下载过程中可能会因为网络问题、服务器问题或是用户自身原因而中断。该工具支持断点续传功能,即在下载中断后能够从上次中断的位置继续下载,而不是重新开始,这对于大规模文件的下载尤其重要。 3. 暂停功能:用户在下载过程中可能因为某些原因需要暂时停止下载,该工具支持暂停功能,用户可以在任何时候暂停下载,并在适当的时候恢复下载。 4. 个人作品:这意味着该软件是由一个或少数开发者作为业余项目开发的。它可能表明该软件的成熟度和稳定性可能低于商业软件,但也不排除其具备某些独到的功能或特性。 5. 开源:工具的源代码是可以公开获取的。这为技术社区的成员提供了研究和改进软件的机会。开源软件通常由社区维护和更新,可以充分利用集体智慧来解决问题和增加新功能。 标签“FTP”已经解释了该工具的主要用途,即处理FTP协议相关的文件下载任务。 压缩包子文件的文件名称列表中的“F-ftp2”可能指的是这款开源FTP资源下载工具的文件名。由于描述中只提到“F-ftp”,所以“F-ftp2”可能是该工具的更新或升级版本,或者仅仅是文件压缩包的命名。 从这些信息来看,如果你是一名网络管理员、开发者或对FTP下载工具有需求的用户,这个工具可能对你非常有用,特别是如果你希望自动下载资源、需要支持续传和暂停功能以处理可能的中断,以及对开源项目有兴趣并愿意参与到项目贡献中。在使用此类开源工具时,建议对源代码进行审查,以确保其安全性和是否符合你的需求,并考虑是否参与改进工具。同时,由于是个人作品,应当准备好可能存在的文档不全、缺乏技术支持等问题,或在使用过程中遇到的任何潜在问题。
recommend-type

【固态硬盘寿命延长】:RK3588平台NVMe维护技巧大公开

# 1. 固态硬盘寿命延长的基础知识 ## 1.1 固态硬盘的基本概念 固态硬盘(SSD)是现代计算设备中不可或缺的存储设备之一。与传统的机械硬盘(HDD)相比,SSD拥有更快的读写速度、更小的体积和更低的功耗。但是,SSD也有其生命周期限制,主要受限于NAND闪存的写入次数。 ## 1.2 SSD的写入次数和寿命 每块SSD中的NAND闪存单元都有有限的写入次数。这意味着,随着时间的推移,SSD的