from表单提交时存在上次残留数据

最新推荐文章于 2023-11-01 17:12:08 发布
原创 最新推荐文章于 2023-11-01 17:12:08 发布 · 925 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#okhttp

本文介绍了在表单提交时遇到数据未清空的问题原因，提供了解决方案，包括设置autocomplete属性为off、提交时清空数据、JavaScript清空、以及使用AJAX提交以避免数据缓存。

在form表单提交时，上一次的数据没有被清空，是因为浏览器会将表单中的数据缓存起来，以便下次提交时可以自动填充表单。

解决办法：

1、 在form表单中添加autocomplete="off"属性，可以禁止浏览器自动填充表单；

2、 在表单提交时，将表单中的数据清空；

3、 在表单提交后，将表单中的数据清空；

4、 使用JavaScript清空表单中的数据；

5、 使用AJAX技术提交表单，可以避免表单数据被缓存。

এ᭄清梵°
关注
该想的不该想到的方法~测试方法总结
十亩之间的博客
06-19 951
网站测试方法一、性能测试性能测试可以检验网站响应速度、承受负载和压力的能力。（1）链接速度测试。用户链接到网站的速度根据上网方式的不同而不同，他们或者电话拔号，或者是宽带上网。（2）负载测试。负载测试是为了测试网站同在某一负载级别上的性能，以保证Web系统在需求范围内正常工作。（3）压力测试。负载测试应该安排在网站系统发布以后，在实际的网络环境中进行测试。二、界面测试 功能测试。Web应用程序中的...
form 表单元素重置(reset)解决方案
johncools的博客
03-31 8085
有初始值的 form 表单在点击默认的 Reset 按钮时，表单元素并不能清空，而是恢复初始值，相信这并不是我们期望的，本文介绍的是用 javascript 解决这一问题的方法。--------------------------------------------------------------点此浏览示例文件-----------------------------------------
antd 4.x.x Form组件 表单提交 值清空问题
Web小生
03-12 2836
Form组件 表单提交时表单内容的控制 目的：表单内容的清空与否，自主控制 未控制情况下 const onFinish = (value) => { console.log(value) } <Form onFinish={onFinish} > <Form.Item name='editValue' > <Input.TextArea rows={4} /> </Form.Item> <Form.I
Django使用form表单填写错误不清空已填写内容
qq_21649903的博客
09-25 904
使用form表单时发现一个很奇怪的问题，每次填写完验证码，如果验证码输入错误，则所有填写内容都将被清空。 一开始的代码大致如下： if CANCASERegister_form.is_valid(): ... CANCASERegister_form = CANCaseRegisterForm() return render(request, 'assets/CANCase_register.html', locals()) 为了使得验证码输入错误后已填写内容不被清空，我们修改为如下格式即可： i
[django]form不清空问题解决
weixin_30478619的博客
08-04 704
https://www.cnblogs.com/OldJack/p/7118396.html 有时候提交表单后,发现某个字段写错了,但是form的其他字段竟然被清空,这个万万不能接受.所有django的form后端生成form的html,渲染到前端可以解决 1.前端写form的html 2.django的form生成前端form所需的html forms.html #!/usr/bin/env p...
关于Ant Design of Vue中form表单编辑或新增后再次点击编辑或新增依然出现上一条数据问题
amy_victory的博客
01-13 4328
在使用Ant Design of Vue这个框架时，界面创建新增和编辑时，出现一个问题，就是新增信息保存后再新增一条信息发现上一条新增的记录还在form表单里并没有清除，不管怎么去清除数据依旧出现这个问题，还有编辑的时候也同样出现这个问题，编辑完一条信息后还编辑后者新增第二条信息依然出现的是上一条信息的数据在form里面，所以一定要仔细阅读官网文档，不然就容易踩了这个坑。其实这个问题不难解决。官网文档已经写好方法了 resetFields 重置一组输入控件的值（为 initialValue）与状态，
elementUI远程下拉搜索框清空后,选项里面还存留着上次的搜索结果
qq_41943624的博客
06-30 1652
加上elementUI自带的clear方法和visible-change方法。elementUI下拉搜索框清空后,选项里面还存留着上次的搜索结果。
import React, {useEffect, useRef, useState} from 'react'; import { Button, Switch, Modal, Form, Input, message, Row, Col, Select, Upload, } from 'antd'; import {ActionType, ProTable} from '@ant-design/pro-components'; import { request } from '@@/plugin-request/request'; import DomainList from '@/pages/DataAssets/arealist'; interface DomainItem { id: string; areaName: string; } const AssetTable = () => { const [form] = Form.useForm(); const [modalVisible, setModalVisible] = useState(false); const [editingRecord, setEditingRecord] = useState(null); const [domains, setDomains] = useState<DomainItem[]>([]); const [currentDomain, setCurrentDomain] = useState<string>(''); const [currentDomainName, setCurrentDomainName] = useState<string>(''); const [systemOptions, setSystemOptions] = useState([]); const [processOptions, setprocessOptions] = useState([]); const [objOptions, setobjOptions] = useState([]); const [fileList, setFileList] = useState<any[]>([]); // 存储上传的文件列表 const actionRef = useRef(); const dsType_options = [ { value: '清洗后数据', label: '清洗后数据' }, { value: '原始数据', label: '原始数据' }, ]; // 模拟请求函数 const fetchData = async (params: { current: any; pageSize: any }) => { const { current, pageSize, ...restParams } = params; const response = await fetch('/ds/dsbaseinfo/getAssetsByCondition', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ ...restParams, areaId: currentDomain, pageNum: current, pageSize, }), }); const data = await response.json(); console.log(data) return { data: data.list || [], total: data.total || 0, }; }; useEffect(() => { request('/ds/dsareainfo/list').then(res => { if (res.data) { setDomains(res.data); setCurrentDomain((res.data)[0].id); setCurrentDomainName((res.data)[0].areaName); } }); }, []); // 切换左侧领域时触发 const handleDomainChange = (d: any) => { setCurrentDomain(d.id); setCurrentDomainName(d.areaName); }; useEffect(() => { if (currentDomainName && form) { form.setFieldsValue({ areaName: currentDomainName }); form.setFieldsValue({ areaId: currentDomain }); } }, [currentDomainName, modalVisible, form]); // 查询筛选条件：系统、流程节点、业务对象 useEffect(() => { if (currentDomain) { // 请求系统数据 request('/ds/dssysinfo/byareaid', { method: 'POST', data: { areaId: currentDomain }, }).then(res => { const options = res.data?.map((item: { id: string; sysName: string }) => ({ value: item.id, label: item.sysName, })) || []; setSystemOptions(options); }); // 请求流程数据 request(`/ds/dsprocessinfo/getprocessbyarea?areaId=${currentDomain}`).then(res => { const options = res.data?.length > 0 ? JSON.parse(res.data[0].proPoint).map((item: string) => ({ value: item, label: item })) : []; setprocessOptions(options); }); // 请求业务对象数据 request('/ds/dsobjinfo/byareaid', { method: 'POST', data: { areaId: currentDomain }, }).then(res => { const options = res.data?.map((item: { id: string; objName: string }) => ({ value: item.id, label: item.objName, })) || []; setobjOptions(options); }); } }, [currentDomain]); // 表格列定义 const columns = [ { title: '资产名称', dataIndex: 'dsName', key: 'dsName', valueType: 'text', search: true, }, { title: '表名称', dataIndex: 'dsTableName', key: 'dsTableName', valueType: 'text', search: true, }, { title: '创建人', dataIndex: 'createUser', key: 'createUser', valueType: 'select', search: true, fieldProps: { options: [ { value: 'GW00216679', label: '许海兵' }, { value: 'GW00270950', label: '郭毅男' }, { value: 'GW00223247', label: '靳晓鹏' }, { value: 'GW00270941', label: '张开洋' }, { value: 'GW1100584', label: '张华' }, { value: 'GW00317510', label: '魏新龙' }, ], }, }, { title: '系统', dataIndex: 'sysName', key: 'sysName', valueType: 'select', search: true, fieldProps: { options: systemOptions, }, }, { title: '流程节点', dataIndex: 'processPointName', key: 'processPointName', valueType: 'select', fieldProps: { options: processOptions, }, }, { title: '业务对象', dataIndex: 'bussinessObjName', key: 'bussinessObjName', valueType: 'select', fieldProps: { options: objOptions, }, }, { title: '数据类型', dataIndex: 'dsType', key: 'dsType', valueType: 'select', search: true, fieldProps: { options: [ { value: '清洗后数据', label: '清洗后数据' }, { value: '原始数据', label: '原始数据' }, ], }, }, { title: '是否认证', dataIndex: 'isConfirm', key: 'isConfirm', valueType: 'select', fieldProps: { options: [ { value: 'true', label: '是' }, { value: 'false', label: '否' }, ], }, }, { title: '是否发布', dataIndex: 'isPublished', key: 'isPublished', valueType: 'select', fieldProps: { options: [ { value: 'true', label: '是' }, { value: 'false', label: '否' }, ], }, }, { title: '操作', valueType: 'option', render: (_: any, record: any) => ( <> <Button type="link" onClick={() => handleEdit(record)}> 编辑 </Button> <Button type="link" danger onClick={() => handleDelete(record)}> 删除 </Button> <Button type="link" onClick={() => handleTogglePublish(record)}> {record.isPublished ? '下线' : '上线'} </Button> </> ), }, ]; // 打开新增弹窗 const handleAdd = () => { console.log("aaaaaaaaaaaaaa") form.resetFields(); // 👈 清空表单 setEditingRecord(null); setFileList([]); setModalVisible(true); }; // 打开编辑弹窗 const handleEdit = (record: any) => { setEditingRecord(record); form.setFieldsValue(record); setModalVisible(true); }; // 删除操作 const handleDelete = (record: any) => { console.log('删除:', record); message.success(`删除了：${record.assetName}`); }; // 上线/下线操作 const handleTogglePublish = (record: any) => { console.log('切换状态:', record); message.success(`${record.isPublished ? '下线' : '上线'}成功`); }; // 文件上传配置 const uploadProps = { name: 'multipartFile', action: 'http://localhost:8040/ds/dsdemo/addfile', maxCount: 1, withCredentials: true, fileList: fileList, onChange: (info: any) => { const file = info.file; const fileList = info.fileList; if (file.status === 'done') { // 上传成功 message.success(`${file.name} 上传成功`); const filePath = file.response?.filePath || '#'; setFileList([file]); form.setFieldsValue({ demoData: filePath }); } else if (file.status === 'removed') { // 文件被删除 setFileList([]); form.setFieldsValue({ demoData: null }); } else if (file.status === 'error') { // 上传失败 message.error(`${file.name} 上传失败`); } else if (file.status === 'uploading') { // 正在上传 console.log('文件正在上传:', file.name); } // 始终更新 fileList 以保持 UI 同步 setFileList(fileList); }, onRemove: () => { setFileList([]); form.setFieldsValue({ demoData: null }); return true; }, }; // 表单提交 const handleOk = async () => { try { const values = await form.validateFields(); const payload = { ...values, areaId: currentDomain, }; let url = '/ds/dsbaseinfo/add'; // 默认是新增 if (editingRecord) { url = '/ds/dsbaseinfo/update'; // 编辑 payload.id = editingRecord.id; // 从 editingRecord 中提取 id } // 发送请求 const res = await request(url, { method: 'POST', data: payload, }); if(res){ message.success(editingRecord ? '编辑成功' : '新增成功'); setModalVisible(false); form.resetFields(); setFileList([]); if (actionRef.current) { actionRef.current.reload(); // 刷新表格 } else { console.error('❌ actionRef 未绑定到 ProTable'); } } } catch (error) { message.error('提交失败'); } }; return ( <div style={{ display: 'flex', height: '100%' }}> <DomainList domains={domains} currentDomain={currentDomain} onDomainChange={handleDomainChange} /> <ProTable headerTitle="资产列表" request={fetchData} style={{ marginLeft: 5, maxWidth: 1650 }} // @ts-ignore columns={columns} actionRef={actionRef} rowKey="id" pagination={{ pageSize: 10, showSizeChanger: true, }} search={{ labelWidth: 120, defaultCollapsed: false, filterType: 'query', }} toolBarRender={() => [ <Button type="primary" key="add" onClick={handleAdd}> 新增 </Button>, ]} /> {/* 新增/编辑模态框 */} <Modal title={editingRecord ? '编辑资产' : '新增资产'} open={modalVisible} // 👈 确认你用的是 open 还是 visible onOk={handleOk} onCancel={() => { form.resetFields(); setModalVisible(false); setEditingRecord(null); setFileList([]); }} width={800} > <Form form={form} layout="vertical" initialValues={editingRecord || {}}> <Row gutter={16}> {/* 左侧列 */} <Col span={12}> <Form.Item label="领域" name="areaName" rules={[{ required: true }]}> <Input placeholder="禁用状态" disabled /> </Form.Item> <Form.Item label="领域ID" name="areaId" rules={[{ required: true }]} hidden> <Input /> </Form.Item> <Form.Item label="业务对象" name="bussinessObjName" rules={[{ required: true }]}> <Select showSearch placeholder="请选择业务对象"> {objOptions.map((opt: any) => ( <Select.Option key={opt.value} value={opt.value}> {opt.label} </Select.Option> ))} </Select> </Form.Item> <Form.Item label="资产名称" name="dsName" rules={[{ required: true }]}> <Input placeholder="请输入资产名称" /> </Form.Item> <Form.Item label="数据Owner工号" name="dsOwnerNum" rules={[{ required: true }]}> <Input placeholder="请输入数据Owner工号" /> </Form.Item> <Form.Item label="数据类型" name="dsType" rules={[{ required: true }]}> <Select showSearch placeholder="请选择数据类型" options={dsType_options} /> </Form.Item> </Col> {/* 右侧列 */} <Col span={12}> <Form.Item label="系统" name="sysName" rules={[{ required: true }]}> <Select showSearch placeholder="请选择系统"> {systemOptions.map((opt: any) => ( <Select.Option key={opt.value} value={opt.value}> {opt.label} </Select.Option> ))} </Select> </Form.Item> <Form.Item label="流程节点" name="processPointName" rules={[{ required: true }]}> <Select showSearch placeholder="请选择流程节点"> {processOptions.map((opt: any) => ( <Select.Option key={opt.value} value={opt.value}> {opt.label} </Select.Option> ))} </Select> </Form.Item> <Form.Item label="表名称" name="dsTableName" rules={[{ required: true }]}> <Input placeholder="请输入表名称" /> </Form.Item> <Form.Item label="数据Owner姓名" name="dsOwnerName" rules={[{ required: true }]}> <Input placeholder="请输入数据Owner姓名" /> </Form.Item> <Form.Item label="是否认证" name="isConfirm" valuePropName="checked"> <Switch /> </Form.Item> </Col> </Row> <Row gutter={16}> <Col span={24}> <Form.Item label="数据描述" name="dsMemo" rules={[{ required: true }]}> <Input.TextArea rows={2} placeholder="请输入描述信息" /> </Form.Item> <Form.Item label="数据范围" name="dsRange"> <Input.TextArea rows={2} placeholder="请输入数据范围" /> </Form.Item> <Form.Item label="样例数据上传"> <Upload {...uploadProps}> <Button>选择文件</Button> </Upload> {/* 展示已上传文件 */} {fileList.length > 0 && fileList.map(file => ( <div key={file.uid} style={{ marginTop: 10, padding: '8px', border: '1px solid #e8e8e8', borderRadius: 4, display: 'flex', justifyContent: 'space-between', alignItems: 'center', }} > <a href={file.url} target="http://baidu.com" rel="noopener noreferrer"> {file.name} </a> <Button type="link" danger onClick={() => uploadProps.onRemove?.()}> 删除 </Button> </div> ))} </Form.Item> {/* 将上传文件路径保存到 Form 中 */} <Form.Item name="demoData" noStyle> <Input type="hidden" /> </Form.Item> </Col> </Row> </Form> </Modal> </div> ); }; export default AssetTable; 以上代码 点完编辑按钮弹出框 ，再打开新增 发现编辑的数据还在 怎么解决
07-19
这个问题的根本原因是：**表单状态未正确清空，`Form` 中仍然保留了上次编辑时设置的值。** --- ## ✅ 问题分析 你已经调用了 `form.resetFields()` 和 `setModalVisible(false)`，但问题仍然存在，可能原因如下...
数据重复怎么破？ESP32上传ID分配、去重与幂等性设计全解析
数据重复问题的本质与挑战 在物联网系统中，数据重复并非偶然异常，而是由网络不稳定性、设备重启频繁、ID生成冲突等多重因素共同导致的系统性问题。尤其在ESP32等资源受限设备上，缺乏全局时钟与持久化机制，极易...
<template> <div class="app-container"> <!--物料类型数据 --> <el-row :gutter="20"> <el-col :span="4" :xs="24"> <div class="head-container"> <el-input v-model="materiaTypelName" placeholder="请输入物料类型名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" /> </div> <div class="head-container"> <el-tree :data="typeOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" default-expand-all highlight-current @node-click="handleNodeClick" /> </div> </el-col> <el-col :span="20" :xs="24"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="编号" prop="number"> <el-input v-model="queryParams.number" placeholder="请输入编号" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="名称" prop="name"> <el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="状态" prop="status"> <el-select v-model="queryParams.status" placeholder="请选择状态" clearable> <el-option v-for="dict in dict.type.mdm_common_status_list" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <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="['mdm:typeAttr:add']" >新增 </el-button> </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['mdm:typeAttr:edit']" >修改 </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="['mdm:typeAttr:remove']" >删除 </el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['mdm:typeAttr:export']" >导出 </el-button> </el-col> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-loading="loading" :data="typeAttrList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="45" align="center" fixed/> <el-table-column label="编号" align="center" prop="number"/> <el-table-column label="名称" align="center" prop="name"/> <!-- <el-table-column label="类型ID" align="center" prop="typemgrId"/>--> <el-table-column label="类型" align="center" prop="typemgrName" width="140"/> <el-table-column label="字段类型" align="center" prop="dataType"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_column_type" :value="scope.row.dataType"/> </template> </el-table-column> <el-table-column label="文本最大长度" align="center" prop="length" width="120"/> <el-table-column label="数值最大值" align="center" prop="maxVal" width="120"/> <el-table-column label="数值最小值" align="center" prop="minVal" width="120"/> <el-table-column label="默认值" align="center" prop="defaultVal"/> <el-table-column label="合法值列表" align="center" prop="validList" width="120"/> <el-table-column label="枚举ID" align="center" prop="enumerateId"/> <el-table-column label="枚举表" align="center" prop="enumerateTable"/> <el-table-column label="单位" align="center" prop="unit"/> <el-table-column label="是否必填" align="center" prop="isNull"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list " :value=“scope.row.isNull”/> <el-button size=“mini” type=“text” icon=“el-icon-edit” @click=“handleUpdate(scope.row)” v-hasPermi=“[‘mdm:typeAttr:edit’]” >修改 <el-button size=“mini” type=“text” icon=“el-icon-delete” @click=“handleDelete(scope.row)” v-hasPermi=“[‘mdm:typeAttr:remove’]” >删除 <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> <!-- 添加或修改属性规则对话框 --> <el-dialog :title="title" :visible.sync="open" width="850px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right"> <!-- 基本信息 --> <el-row> <el-col :span="12"> <el-form-item label="编号" prop="number" > <el-input v-model="form.number" placeholder="请输入编号" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="名称" prop="name"> <el-input v-model="form.name" placeholder="请输入名称" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="类型ID" prop="typemgrId"> <!-- <el-input v-model="form.typemgrId" placeholder="请输入类型ID" style="width: 240px"/>--> <treeselect v-model="form.typemgrId" :options="typeOptions" :show-count="true" placeholder="请选择物料类型" style="width: 240px" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="字段类型" prop="dataType"> <el-select v-model="form.dataType" placeholder="请选择字段类型" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_column_type" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <!-- 数值与文本配置 --> <el-row> <el-col :span="12"> <el-form-item label="文本最大长度" prop="length"> <el-input v-model="form.length" placeholder="请输入文本最大长度" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="数值最大值" prop="maxVal"> <el-input v-model="form.maxVal" placeholder="请输入数值最大值" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="数值最小值" prop="minVal"> <el-input v-model="form.minVal" placeholder="请输入数值最小值" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="默认值" prop="defaultVal"> <el-input v-model="form.defaultVal" placeholder="请输入默认值" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="枚举ID" prop="enumerateId"> <el-input v-model="form.enumerateId" placeholder="请输入枚举ID" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="正则表达式校验" prop="regularCheck"> <el-input v-model="form.regularCheck" placeholder="请输入正则表达式校验" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="枚举表" prop="enumerateTable"> <el-input v-model="form.enumerateTable" placeholder="请输入枚举表" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="单位" prop="unit"> <el-input v-model="form.unit" placeholder="请输入单位" style="width: 240px"/> </el-form-item> </el-col> </el-row> <!-- 状态与布尔选项 --> <el-row> <el-col :span="12"> <el-form-item label="是否必填" prop="isNull"> <el-select v-model="form.isNull" placeholder="请选择是否必填" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list " :key=“dict.value” :label=“dict.label” :value=“dict.value” > <el-row> <el-col :span="12"> <el-form-item label="是否表单显示" prop="isShowForm"> <el-select v-model="form.isShowForm" placeholder="请选择是否表单显示" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list " :key=“dict.value” :label=“dict.label” :value=“dict.value” > <el-row> <el-col :span="12"> <el-form-item label="是否只读" prop="isReadOnly"> <el-select v-model="form.isReadOnly" placeholder="请选择是否只读" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="是否支持排序" prop="sortFlag"> <el-select v-model="form.sortFlag" placeholder="请选择是否支持排序" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="数值是否有公差" prop="isTolerance"> <el-select v-model="form.isTolerance" placeholder="请选择数值是否有公差" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="表单排序" prop="orderNum"> <el-input v-model="form.orderNum" placeholder="请输入表单排序" style="width: 240px"/> </el-form-item> </el-col> </el-row> <!-- 高级设置 --> <el-row> <el-col :span="12"> <el-form-item label="弹窗编辑器ID" prop="popupEditId"> <el-input v-model="form.popupEditId" placeholder="请输入弹窗编辑器ID" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="URL地址" prop="href"> <el-input v-model="form.href" placeholder="请输入URL地址" style="width: 240px"/> </el-form-item> </el-col> </el-row> <!-- 枚举与校验 --> <el-row> <el-col :span="24"> <el-form-item label="合法值列表" prop="validList"> <!--<el-input v-model="form.validList" placeholder="请输入合法值列表" style="width: 240px"/>--> <el-table :data="validDataList" v-loading="validLoading" ref="validTable" @selection-change="handleValidSelectionChange"> <el-table-column type="selection" width="55" align="center" /> <el-table-column label="字典编码" align="center" prop="dictCode" /> <el-table-column label="字典标签" align="center" prop="dictLabel"> <template slot-scope="scope"> <span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'">{{scope.row.dictLabel}}</span> <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass">{{scope.row.dictLabel}}</el-tag> </template> </el-table-column> <el-table-column label="字典键值" align="center" prop="dictValue" /> </el-table> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="状态" prop="status"> <el-radio-group v-model="form.status"> <el-radio v-for="dict in dict.type.mdm_common_status_list" :key="dict.value" :label="dict.value" >{{ dict.label }} </el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> </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-col> </el-row> </div> </template> <script> import {listTypeAttr, getTypeAttr, delTypeAttr, addTypeAttr, updateTypeAttr} from "@/api/mdm/typeAttr"; import { treeselect } from "@/api/mdm/mdmMaterialType"; import Treeselect from "@riophae/vue-treeselect"; import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data"; export default { name: "TypeAttr", dicts: ['mdm_common_flag_list', 'mdm_common_status_list','mdm_common_column_type'], components: { Treeselect }, data() { return { // 遮罩层 loading: true, // 选中数组 ids: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 显示搜索条件 showSearch: true, // 总条数 total: 0, // 属性规则表格数据 typeAttrList: [], // 弹出层标题 title: "", // 是否显示弹出层 open: false, // 查询参数 queryParams: { pageNum: 1, pageSize: 10, number: null, name: null, typemgrId: null, dataType: null, length: null, maxVal: null, minVal: null, defaultVal: null, validList: null, enumerateId: null, enumerateTable: null, unit: null, isNull: null, popupEditId: null, href: null, isQuery: null, isShowForm: null, isShowList: null, isReadOnly: null, orderNum: null, sortFlag: null, isTolerance: null, regularCheck: null, status: null, }, // 表单参数 form: {}, // 表单校验 rules: { number: [ {required: true, message: "编号不能为空", trigger: "blur"} ], name: [ {required: true, message: "名称不能为空", trigger: "blur"} ], typemgrId: [ {required: true, message: "类型ID不能为空", trigger: "blur"} ], dataType: [ {required: true, message: "字段类型不能为空", trigger: "change"} ], }, defaultProps: { children: "children", label: "label" }, typeOptions : undefined, materiaTypelName : undefined, //合法值列表字典值 validDataList: undefined , validDataListTotal : undefined , validLoading : true, // treeselectOptions: [], selectedValues: [] ,// 存储当前选中的 dictValue 数组 isInitSelection: false, }; }, watch: { // 根据名称筛选部门树 materiaTypelName(val) { this.$ refs.tree.filter(val); } }, created() { this.getList(); this.getTreeselect() }, methods: { /** 查询属性规则列表 */ getList() { this.loading = true; listTypeAttr(this.queryParams).then(response => { this.typeAttrList = response.rows; this.total = response.total; this.loading = false; }); }, // 取消按钮 cancel() { this.open = false; this.reset(); }, // 表单重置 reset() { this.form = { id: null, number: null, name: null, typemgrId: null, dataType: null, length: null, maxVal: null, minVal: null, defaultVal: null, validList: null, enumerateId: null, enumerateTable: null, unit: null, isNull: null, popupEditId: null, href: null, isQuery: null, isShowForm: null, isShowList: null, isReadOnly: null, orderNum: null, sortFlag: null, isTolerance: null, regularCheck: null, status: null, createBy: null, createTime: null, updateBy: null, updateTime: null }; this.resetForm("form"); }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNum = 1; this.getList(); }, /** 重置按钮操作 */ resetQuery() { this.resetForm("queryForm"); this.handleQuery(); }, // 多选框选中数据 handleSelectionChange(selection) { this.ids = selection.map(item => item.id) this.single = selection.length !== 1 this.multiple = !selection.length }, /** 新增按钮操作 */ handleAdd() { this.reset(); this.getTreeselect(); this.open = true; this.title = "添加属性规则"; this.getValidList() }, /** 修改按钮操作 */ handleUpdate(row) { this.reset(); const id = row.id || this.ids getTypeAttr(id).then(response => { this.form = response.data; // this.form = {}; // this.$ set(this, 'form', response.data); // 强制设置响应式 console.log("点击修改按钮后:") console.log(this.form.validList) this.open = true; this.title = "修改属性规则"; this.getValidList(); // this.$ nextTick().then(() => { // this.initDefaultSelection() // }) }); }, /** 提交按钮 */ submitForm() { this.$ refs["form"].validate(valid => { if (valid) { if (this.form.id != null) { updateTypeAttr(this.form).then(response => { this.$ modal.msgSuccess("修改成功"); this.open = false; this.getList(); }); } else { addTypeAttr(this.form).then(response => { this.$ modal.msgSuccess("新增成功"); this.open = false; this.getList(); }); } } }); }, /** 删除按钮操作 */ handleDelete(row) { const ids = row.id || this.ids; this.$ modal.confirm('是否确认删除属性规则编号为"' + ids + '"的数据项？').then(function () { return delTypeAttr(ids); }).then(() => { this.getList(); this.$ modal.msgSuccess("删除成功"); }).catch(() => { }); }, /** 导出按钮操作 */ handleExport() { this.download('mdm/typeAttr/export', { ...this.queryParams }, `typeAttr_${new Date().getTime()}.xlsx`) }, // 筛选节点 filterNode(value, data) { if (!value) return true; return data.label.indexOf(value) !== -1; }, // 节点单击事件 handleNodeClick(data) { this.queryParams.typemgrId = data.id; this.handleQuery(); }, /** 查询物料类型树结构 */ getTreeselect() { treeselect().then(response => { const originalData = response.data; this.typeOptions = response.data; // this.treeselectOptions = originalData.map(item => ({ // value: item.id, // 将 id 映射为 value // label: item.name // 将 name 映射为 label // })); // console.log(mappedData); }); }, /** 查询字典数据列表 */ getValidList() { console.log("进入字典初始化") this.validLoading = true; const query = { pageNum: 1, pageSize: 1000, dictType: "mdm_validlist_dict", } listData(query).then(response => { this.validDataList = response.rows; this.validDataListTotal = response.total; // 数据加载完成后使用 nextTick 确保 DOM 已渲染表格 this.$ nextTick(() => { this.initDefaultSelection(); // 安全地初始化选中 }); this.validLoading = false; }); }, initDefaultSelection(){ this.isInitSelection = true; if(this.form.validList == null){ return } const table = this.$ refs.validTable; const selectedArray = this.form.validList.split(','); console.log("初始化字典数据："); console.log(selectedArray); // 根据唯一标识（如 dictCode）查找要选中的行 // 遍历数据，匹配需要默认选中的行 this.selectedValues = []; this.validDataList.forEach(row => { if (selectedArray.includes(row.dictValue)) { table.toggleRowSelection(row, true); // 默认选中该行 this.selectedValues.push(row.dictValue); } }); // 初始化完成后恢复标志位 this.$ nextTick(() => { this.isInitSelection = false; }); }, handleValidSelectionChange(selection) { console.log("进入选中方法"); if (this.isInitSelection) { // 如果是初始化选中阶段，不执行业务逻辑 return; } console.log("进入选中方法"); // 更新选中项的 dictValue 到 selectedValues 并同步到 form.validList this.selectedValues = selection.map(item => item.dictValue); this.form.validList = this.selectedValues.join(','); console.log("选中后："); console.log(this.form.validList); }, } }; </script> 第一次点击正常勾选 ，关闭弹窗后，再次点击 就不正常
06-27
这可能是由于在第一次操作后，表单提交时修改了数据，导致第二次获取的数据中`validList`变成了空字符串？或者是在其他地方修改了？然而，问题描述中并没有提到提交表单修改了数据，所以可能是其他原因。另一个关键...
每次点击修改密码通过@click = 'dialogVisible’打开对话框时，清空新密码和确认新密码两个表单项：<template> <div> <div class="card" style="display: flex; justify-content: center"> <div style="width: 50%"> <el-upload :action="baseUrl + '/files/upload'" :on-success="handleFileUpload" :show-file-list="false" class="avatar-uploader"> <img v-if="data.user.avatar" :src="data.user.avatar" class="avatar" /> <el-icon v-else class="icon"><Plus /></el-icon> </el-upload> <el-input v-model="data.user.username" size="large" placeholder="账号" disabled style="margin-bottom: 20px"></el-input> <el-input v-model="data.user.name" size="large" placeholder="姓名" clearable style="margin-bottom: 20px"></el-input> <el-input v-model="data.user.phone" size="large" placeholder="电话" clearable style="margin-bottom: 20px"></el-input> <el-input v-model="data.user.email" size="large" placeholder="邮箱" clearable style="margin-bottom: 20px"></el-input> <div style="text-align: center; margin-bottom: 40px"> <el-button @click="dialogVisible" plain size="large" type="warning" style="width: 100%">修改密码</el-button> </div> <div style="text-align: center; margin-bottom: 40px"> <el-button @click="update" plain type="primary" style="height: 50px; width: 100px; font-size: 15px">保存</el-button> </div> </div> </div> <el-dialog v-model="data.formVisible" destroy-on-close align-center width="40%" style="padding-top: 24px"> <div style="text-align: center; font-size: 18px; margin-bottom: 40px">修改密码</div> <div style="display: flex; justify-content: center; margin-bottom: 24px"> <div style="width: 80%"> <el-form ref="formRef" :model="data.user"> <el-form-item prop="password" style="margin-bottom: 20px"> <el-input v-model="data.user.password" size="large" placeholder="原密码" clearable show-password></el-input> </el-form-item> <el-form-item prop="newPassword" style="margin-bottom: 20px"> <el-input v-model="data.user.newPassword" size="large" placeholder="新密码" clearable show-password></el-input> </el-form-item> <el-form-item prop="confirmNewPassword"> <el-input v-model="data.user.confirmNewPassword" size="large" placeholder="新密码" clearable show-password></el-input> </el-form-item> </el-form> </div> </div> <div style="text-align: center; margin-bottom: 26px"> <el-button @click="data.formVisible = false" plain size="large" type="primary" style="margin-right: 35px">取消</el-button> <el-button @click="updatePassword" plain size="large" type="primary" style="margin-left: 35px">确定</el-button> </div> </el-dialog> </div> </template> <script setup> import { reactive, ref } from "vue"; import request from "@/utils/request.js"; import {ElMessage} from "element-plus"; import router from "@/router/index.js"; const baseUrl = import.meta.env.VITE_BASE_URL const formRef = ref() const data = reactive({ user: JSON.parse(localStorage.getItem('xm-user') || '{}'), formVisible: false, }) const dialogVisible = () => { data.formVisible = true } const handleFileUpload = (res) => { data.user.avatar = res.data } const emit = defineEmits(['updateUser']) const update = () => { if (data.user.role === 'ADMIN') { request.put('/admin/update', data.user).then(res => { if (res.code === '200') { ElMessage.success('操作成功') localStorage.setItem('xm-user', JSON.stringify(data.user)) emit('updateUser') } else { ElMessage.error(res.message) } }) } } const updatePassword = () => { formRef.value.validate(valid => { if (valid) { request.put('/updatePassword', data.user).then(res => { if (res.code === '200') { ElMessage.success('操作成功') logout() } else { ElMessage.error(res.message) } }) } }) } const logout = () => { localStorage.removeItem('xm-user') router.push('/login') } </script>
最新发布
09-19
然而，由于我们的表单数据是绑定在`data.user`上的，而`data.user`是一个持续存在的响应式对象，它的初始值可能并不是空（比如用户信息加载后就有值）。因此，直接调用resetFields可能不会达到清空的效果，因为...
element中表格，表单等等重置之后依然显示上一次的数据
CHENC0518的博客
03-15 1154
1.造成这个问题的原因就是因为深拷贝和浅拷贝的问题，只需要对赋值的数据进行深拷贝即可。
ELEMENT FORM表单缓存上次记录问题
mm520zh的博客
08-25 594
el-form
elementUI form表单先点击查看，再点击新增，上次遗留数据没有清空
pingguo函数的博客
10-20 1309
现象：在使用elementUI做增删改查时，查看与新增共用一个表单，先点击查看，再点击新增，上次遗留数据没有清空成功。用resetFeilds去清空表单也没有清空成功。this.formData是表单对象。
vue-element-ui 中 form resetFields并没有清空表单
m0_37922914的博客
12-26 2552
问题背景 vue-element-ui 中 form中有个清空表单的方法，即假如给表单一个ref='form', 则清空表单的方法为this.$refs['form'].resetFields() 可当我在dialog组件中用这个方法的时候，这就出现问题了，居然清空不了~~~~~ 问题所在 问题的本质是因为你编辑时，第一次打开dialog的时候给表单绑定的form赋值了，这时候这个form的初始值...
elementUI的弹窗总是保留上一次输入的校验
Dreamingnini的博客
11-01 389
问题描述：打开弹窗输入内容后，点击关闭，再次打开弹窗的时候虽然内容是空的，但上一次输入过的下拉框会提示校验。调用this.$refs['form'].resetFields()可以清除校验。
javascript清除表单缓存- disable form caching
01-11 1496
表单缓存是指当用户在表单输入之后再次回到该表单的时候，浏览器会直接显示用户之前的输入。在大多数情况下这正是我们想要的，但也有些情况我们希望表单能够刷新，特别是根据后台刷新。我现在就遇到了这种问题：某网站有两个select box选择日期进行搜索，搜索结果还是返回相同页面。比如你先选择1月1号到1月2号，然后再选择2月3号到2月4号，这是如果用户点击后退，select还是会保持在2月3号到2月4号，
Bug解决：ElementUI提交表单返回成功后自动清空表单的值
TuPonShuy的博客
07-29 2234
vue+elementui
微信小程序 表单 选择跳转新页面，选择后，返回上一页面保留原页面已填写的值
guairena的博客
10-28 4595
表单页有很多项需要填写，个别项数据较多，需要跳转到新的页面去选择后，带着结果返回。此时，想要返回时，已经填写过的内容保留不变，不被清空。在下一页去获取上一页data中的数据，并修改，再通过。返回上一页，页面不会刷新，且所有数据都在。
轻松解决弹出层表单数据提交问题
- **表单序列化**：在使用Ajax提交数据时，通常需要将表单元素序列化成键值对的形式，以便发送。 - **事件监听**：设置适当的事件监听器来捕捉提交事件，并处理提交逻辑，如在数据提交前进行验证。 #### 5. 完美...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值