<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> 寻找前端列表渲染操作













