element-ui 重置表单this.$refs.dataForm.resetFields()时报错

最新推荐文章于 2024-07-17 16:50:02 发布
原创 最新推荐文章于 2024-07-17 16:50:02 发布 · 3.9k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementUI

本文介绍了解决Element-UI中使用this.$refs.dataForm.resetFields()进行表单重置时遇到的错误：Error: please transfer a valid prop path to form item!。通过使用this.$nextTick来确保DOM加载完成后再执行表单重置。

问题：element-ui 重置表单this.$refs.dataForm.resetFields()时报错：

            [Vue warn]: Error in v-on handler: "Error: please transfer a valid prop path to form item!"

原因：执行重置表单操作时，DOM还没有加载，获取不到表单DOM，就报错了。

解决方法：使用this.nextTick解决，等待dom加载以后再来获取dom对象

this.$nextTick(()=>{
   this.$refs.dataForm.resetFields();//清空表单
})

参考链接：https://www.jianshu.com/p/ab8deeaac9d4

解决 Error: please transfer a valid prop path to form item!
草巾冒小子的博客
08-31 1万+
点击某个DOM，如本案例的button取消按钮，产生报错：此时，应该是该按钮绑定的函数钩子事件中，有不合逻辑的空操作或者错误操作，删除或注释即可。以上就是关于“解决 Error: please transfer a valid prop path to form item!prop的内容和rules中定义的名称不一致！...
Vue 解决 Error: please transfer a valid prop path to form item!
Aotman_的博客
04-14 1925
在 Vue.js 中使用表单验证库（如 VeeValidate 或 Element UI 的表单组件时），遇到错误信息 "please transfer a valid prop path to form item!" 通常指的是在表单项的属性绑定中，路径（prop path）不正确或者未正确传递。这种问题通常出现在表单验证规则的设置或者表单项的绑定上。
解决please transfer a valid prop path to form item! 报错
奥特蛋的博客
02-15 3736
报错原因：循环的item绑定prop不在表单里，一般是动态绑定rulus规则时命名错误，可以绑定已存在的表单。
this.$refs[“dataForm“].resetFields()； 先点击编辑再点修改无效
weixin_41825261的博客
05-24 1708
一般添加和修改都是用一个 dialog. this.$refs["dataForm"].resetFields(); 这块代码是 清空初始值 ,如果先点击 编辑在点击 添加.那么初始值就是 编辑的时候的初始值.再点击添加的时候就是编辑时候的初始值… 正确做法 : 在编辑的时候也得 清空值 this.$refs[“dataForm”].resetFields(); 例如: 添加方法 : addEquipment() { this.dialogAddEquipment = true; t
el-form表单中this.$refs[“dataFormRef“].resetFields()不生效
前端-尔嵘
01-27 5906
在做增删改查的新增时候，弹窗是表单。发现新增时候并没有对表单重置，并未将其值重置为初始值并移除校验结果 首先看表单是怎么写的： -----------------------------------错误示例------------------------------------------ <el-form :model="dataForm" :rules="dataRule" ref="dataForm" v-loading="dataFormL
<template> <dialog-edit :visible.sync="open" :title="activeTitle" @close="handleDialogClose" @changeTab="handleTabChange" :menuTab="pageMenuTab" :reserve="true" > <!-- 设备台账详情页 --> <template slot="equipmentDetail"> <div class="dialog-content-wrap"> <formlist v-if="dictLoaded" :form="form" :form2="formData" :dictData="dictData" ref="formList" :readonly="true" :width="'120px'" /> </div> </template> <!-- 气量检测页 --> <template slot="GasMeasurement"> <div class="dialog-content-wrap" v-if="GasMeasurementReady"> <gas-detection ref="GasMeasurementRef" :equipment-id="currentEquipmentId" @on-new="handleNewDetection" @on-delete="handleDeleteDetection" /> </div> </template> <template v-slot:footer> <div class="dialog_footer"> <el-button @click="handleCancel">关闭</el-button> </div> </template> </dialog-edit> </template> <script> import { getDictionaries } from "@/utils"; import DialogEdit from '@/components/dialogEdit' import GasMeasurement from "../cmmsGasMeasurement/cmmsGasMeasurement.vue"; // 需要导入API函数 import { getCmmsEquipmentInfo } from "@/api/cmmsEquipmentInfo/cmmsEquipmentInfo.js"; export default { name: "EquipmentDetailDialog", components: { GasMeasurement, DialogEdit, }, data() { return { dictLoaded: false, form: [ { arr: [ { code: "equipmentCode", title: "设备编码", type: 0, readonly: true, verification: true, rule: "0", customTips: "", regular: "", dictionary: "", }, { code: "equipmentCategory", title: "设备大类", type: 1, readonly: true, verification: true, rule: "0", customTips: "请选择设备大类", dictionary: "equipment_category", }, { code: "equipmentSubcategory", title: "设备小类", type: 1, readonly: true, verification: true, rule: "0", customTips: "请选择设备小类", dictionary: "equipment_subcategory", }, { code: "modelDescription", title: "燃气表型号描述", type: 0, readonly: true, verification: true, rule: "0", customTips: "燃气表的具体型号描述", regular: "", }, { code: "specificationModel", title: "规格型号", type: 0, readonly: true, verification: true, rule: "0", customTips: "设备的规格型号", regular: "", }, { code: "accuracyLevel", title: "器具准确度等级", type: 1, readonly: true, verification: true, rule: "0", customTips: "请选择准确度等级", dictionary: "accuracy_level", }, { code: "manufacturer", title: "器具生产单位", type: 0, readonly: true, verification: true, rule: "0", customTips: "设备的生产厂家", regular: "", }, { code: "ownershipType", title: "归属类型", type: 1, readonly: true, verification: true, rule: "0", customTips: "请选择设备归属类型", dictionary: "ownership_type", }, { code: "equipmentOwner", title: "设备归属方", type: 0, readonly: true, verification: true, rule: "0", customTips: "设备的所有者", regular: "", }, { code: "purchaseDate", title: "采购日期", type: 6, readonly: true, verification: true, rule: "0", customTips: "请选择采购日期", dateType: "date", dateFormat: "yyyy-MM-dd", }, { code: "storageLocation", title: "存放位置", type: 0, readonly: true, verification: true, rule: "0", customTips: "设备当前的存放位置", regular: "", }, { code: "overdueYears", title: "超期年限(年)", type: 3, readonly: true, verification: true, rule: "0", customTips: "超出检定有效期的年限", regular: "^[0-9]{1,2}$", min: 0, max: 20, }, { code: "lastVerificationDate", title: "最后检定日期", type: 6, readonly: true, verification: true, rule: "0", customTips: "请选择最后检定日期", dateType: "date", dateFormat: "yyyy-MM-dd", }, { code: "equipmentStatus", title: "设备状态", type: 1, readonly: true, verification: true, rule: "0", customTips: "请选择设备当前状态", dictionary: "equipment_status", }, { code: "storageStatus", title: "仓储状态", type: 1, readonly: true, verification: true, rule: "0", customTips: "请选择仓储状态", dictionary: "storage_status", }, { code: "inspectionStatus", title: "检测状态", type: 1, readonly: true, verification: true, rule: "0", customTips: "请选择检测状态", dictionary: "inspection_status", }, { code: "equipmentPhoto", title: "设备照片", type: 30, readonly: true, verification: true, rule: "0", customTips: "请上传设备照片", multiple: false, fileNum: 1, accept: "image/jpeg,image/png", maxSize: 5, }, { code: "remarks", title: "备注", type: 2, readonly: true, verification: true, rule: "0", customTips: "请填写备注信息", rows: 4, }, ], }, ], formData: {}, open: false, dictData: {}, active: "equipmentDetail", activeTitle: "设备详情", currentEquipmentId: null, GasMeasurementReady: false, pageMenuTab: [ { title: "基础信息", sxTitle: "equipmentDetail", hide: false, icon: "el-icon-document", }, { title: "气量监测", sxTitle: "GasMeasurement", hide: false, icon: "el-icon-data-line", }, ], }; }, methods: { async init(row) { this.open = true; this.active = "equipmentDetail"; this.activeTitle = "基础详情"; this.currentEquipmentId = row.id; try { // 并行加载字典和设备详情 const [dictData, detailData] = await Promise.all([ this.loadDictData().catch((e) => { console.error("字典加载失败:", e); return {}; }), this.loadEquipmentDetail(row.id).catch((e) => { console.error("设备详情加载失败:", e); return this.useRowDataAsFallback(row); }), ]); this.dictData = dictData; this.formData = detailData; this.dictLoaded = true; // 确保表单组件已渲染 this.$nextTick(() => { if (this.$refs.formList) { this.$refs.formList.refreshForm(); } }); } catch (error) { console.error("初始化异常:", error); this.dictLoaded = true; } }, async loadEquipmentDetail(equipmentId) { try { const response = await getCmmsEquipmentInfo(equipmentId); // 增加响应为 undefined 的检查 if (!response) { throw new Error("API返回空响应"); } // 检查响应结构，避免访问 undefined.data if (response.data.code === 0 && response.data.data) { const detailData = response.data.data; return { ...detailData, purchaseDate: detailData.purchaseDate ? this.formatDate(detailData.purchaseDate) : null, lastVerificationDate: detailData.lastVerificationDate ? this.formatDate(detailData.lastVerificationDate) : null, }; } else { throw new Error(response.data.msg || "设备详情数据格式错误"); } } catch (error) { throw new Error(`加载设备详情失败: ${error.message}`); } }, async loadDictData() { const dictKeys = [ "equipment_category", "equipment_subcategory", "accuracy_level", "ownership_type", "equipment_status", "storage_status", "inspection_status", ]; try { const data = await getDictionaries(dictKeys); this.dictData = Object.fromEntries( dictKeys.map((key) => [key, data[key] || []]) ); } catch (error) { console.error("加载字典数据失败:", error); this.dictData = Object.fromEntries(dictKeys.map((key) => [key, []])); } }, formatDate(dateString) { return dateString ? new Date(dateString).toISOString().split("T")[0] : null; }, // 添加这个方法 handleDialogClose() { this.handleCancel(); this.$emit("close"); // 确保触发close事件 }, useRowDataAsFallback(row) { return { ...row, purchaseDate: row.purchaseDate ? this.formatDate(row.purchaseDate) : null, lastVerificationDate: row.lastVerificationDate ? this.formatDate(row.lastVerificationDate) : null, }; }, handleCancel() { this.open = false; this.GasMeasurementReady = false; this.$emit("closed"); }, handleTabChange(activeTab) { this.active = activeTab; const activeItem = this.pageMenuTab.find( (item) => item.sxTitle === activeTab ); if (activeItem) { this.activeTitle = activeItem.title; } if (activeTab === "GasMeasurement") { // 确保设备ID已设置后再渲染组件 this.GasMeasurementReady = !!this.currentEquipmentId; this.$nextTick(() => { if (this.$refs.GasMeasurementRef) { this.$refs.GasMeasurementRef.refreshData(); } }); } }, }, mounted() { // 确保组件正常挂载 this.$nextTick(() => { console.log("formList组件实例：", this.$refs.formList); }); }, }; </script> <style scoped> .dialog-content-wrap { padding: 15px; height: 100%; overflow: auto; } </style> 气量监测的地方是个分页查询，怎么修改这个文件 这个是分页的vue /** * 气量监测页面 * * @author gucw * @date 2025-06-10 */ <template> <div class="mod-config padding"> <el-form :inline="true" :model="dataForm" ref="form" @keyup.enter.native="getDataList()" > <el-form-item label="读数录入时间"> <el-date-picker v-model="readingTimeList" type="daterange" range-separator="-" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder=" 结束日期" ></el-date-picker> </el-form-item> <el-form-item label="类型(空跑/检测/计费)" prop="measurementType"> <el-select v-model="dataForm.measurementType" :placeholder="'请选择类型(空跑/检测/计费)'" > <el-option v-for="(item, index) in measurement_type" :key="item.cId" :label="item.entryname" :value="item.entrycode" ></el-option> </el-select> </el-form-item> <el-form-item> <el-button v-if="isAuth('cmmsGasMeasurement:cmmsGasMeasurement:list')" @click="getDataList()" type="primary" >查询</el-button > <el-button v-if="isAuth('cmmsGasMeasurement:cmmsGasMeasurement:list')" @click="resetForm('form')" >重置</el-button > <el-button v-if="isAuth('cmmsGasMeasurement:cmmsGasMeasurement:add')" type="primary" @click="addOrUpdateHandle()" >新增</el-button > <el-button v-if="isAuth('cmmsGasMeasurement:cmmsGasMeasurement:remove')" type="danger" @click="deleteHandle()" >批量删除</el-button > </el-form-item> </el-form> <EproTable class="m-t-10" :tableData="dataList" :titleData="titleForm" :optionData="optionData" :disselected="false" @tableSelect="getTableSelect" v-loading="tableLoading" > <el-table-column slot="action" fixed="right" label="操作" align="center" width="110" > <template slot-scope="scope"> <el-tooltip content="编辑" placement="top" v-if="isAuth('cmmsGasMeasurement:cmmsGasMeasurement:edit')" > <div class="iconfont icon-edit click iconStyle pifu" @click.stop="addOrUpdateHandle(scope.row)" ></div> </el-tooltip> <el-tooltip content="删除" placement="top" v-if="isAuth('cmmsGasMeasurement:cmmsGasMeasurement:remove')" > <div class="iconfont icon-delete click iconStyle pifu" @click.stop="deleteHandle(scope.row.id)" ></div> </el-tooltip> </template> </el-table-column> </EproTable> <el-pagination background @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper" > </el-pagination> <!-- 弹窗, 新增 / 修改 --> <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" ></add-or-update> </div> </template> <script> import AddOrUpdate from "./cmmsGasMeasurementAddAndUpdate"; import { listCmmsGasMeasurement, delCmmsGasMeasurement, } from "@/api/cmmsGasMeasurement/cmmsGasMeasurement.js"; import EproTable from "@/components/epro-table/epro-table"; import { getDictionaries } from "@/utils"; export default { data() { return { dataList: [], pageIndex: 1, pageSize: 10, totalCount: 0, tableLoading: false, dataListSelections: [], addOrUpdateVisible: false, readingTimeList: [], measurement_stage: [], measurement_type: [], optionData: { readingValue: { width: "150px" }, readingTime: { width: "150px" }, stageDict: { width: "150px" }, measurementTypeDict: { width: "150px" }, gasVolume: { width: "150px" }, }, titleForm: { readingValue: "读数", readingTime: "读数录入时间", stageDict: "阶段(出库/检测后/检测前/入库/拆表后)", measurementTypeDict: "类型(空跑/检测/计费)", gasVolume: "气量", }, dataForm: { readingTime: null, measurementType: null, }, }; }, components: { AddOrUpdate, EproTable, }, activated() { this.getDataList(); this.getDictionaries(); }, methods: { // 获取table数据 getTableSelect(val) { this.dataListSelections = val; }, // 获取数据列表 getDataList() { this.$set(this.dataForm, "page", this.pageIndex); this.$set(this.dataForm, "limit", this.pageSize); this.$set(this.dataForm, "beginreadingTime", this.readingTimeList[0]); this.$set(this.dataForm, "endreadingTime", this.readingTimeList[1]); this.tableLoading = true; listCmmsGasMeasurement(this.dataForm).then(({ data }) => { this.dataList = data.page.list; this.totalCount = data.page.totalCount; this.tableLoading = false; }); }, // 获取字典 getDictionaries() { return new Promise((resolve) => { let arr = ["measurement_stage", "measurement_type"]; getDictionaries(arr).then((data) => { this.measurement_stage = data["measurement_stage"]; this.measurement_type = data["measurement_type"]; resolve(); }); }); }, // 每页数 sizeChangeHandle(val) { this.pageSize = val; this.pageIndex = 1; this.getDataList(); }, // 当前页 currentChangeHandle(val) { this.pageIndex = val; this.getDataList(); }, //重置表格 resetForm(formName) { this.$refs[formName].resetFields(); this.readingTimeList = []; this.getDataList(); }, // 新增 / 修改 addOrUpdateHandle(data) { this.addOrUpdateVisible = true; this.$nextTick(() => { this.$refs.addOrUpdate.init(data); }); }, // 删除 deleteHandle(id) { if (this.dataListSelections.length === 0 && !id) { this.$message({ message: "请选择数据", type: "warning", }); return; } var ids = id ? [id] : this.dataListSelections.map((item) => { return item.id; }); this.$confirm( `确定对[id=${ids.join(",")}]进行[${ ids.length == 1 ? "删除" : "批量删除" }]操作?`, "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", } ).then(() => { delCmmsGasMeasurement(ids).then(({ data }) => { if (data.code === 0) { this.getDataList(); this.$message.success("删除成功"); } else { this.$message.error(data.msg); } }); }); }, }, }; </script>
06-12
this.$refs.gasTable.toggleRowSelection(row, true); } }); }); }, // 重置选择（对话框关闭时） resetSelection() { this.selectedGasRows = []; } } }; ``` #### 3. **整合到设备详情对话框**...
<template> <el-dialog :title="!dataForm.id ? '新增电池信息' : '修改电池信息'" :close-on-click-modal="false" :visible.sync="visible" width="80%" top="5vh" class="custom-dialog" @close="resetForm" > <el-tabs v-model="activeTab" type="border-card"> <el-tab-pane label="基础信息" name="basic"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="180px" size="small" > <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="电池ID" prop="batteryId"> <el-input v-model="dataForm.batteryId" placeholder="请输入电池ID"></el-input> </el-form-item> <el-form-item label="电池类型" prop="batteryKind"> <el-select v-model="dataForm.batteryKind" placeholder="请选择电池类型" clearable style="width:100%" > <el-option label="运营" :value="0"></el-option> <el-option label="售后" :value="1"></el-option> <el-option label="内测" :value="2"></el-option> <el-option label="报废" :value="3"></el-option> </el-select> </el-form-item> <el-form-item label="电池电压(V)" prop="batteryVoltage"> <el-input-number v-model="dataForm.batteryVoltage" :min="0" :precision="2" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="电池电流(A)" prop="batteryCurrent"> <el-input-number v-model="dataForm.batteryCurrent" :min="0" :precision="2" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="电池SOC(%)" prop="batterySoc"> <el-input-number v-model="dataForm.batterySoc" :min="0" :max="100" :precision="0" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="工作模式" prop="batteryWorkMode"> <el-select v-model="dataForm.batteryWorkMode" placeholder="请选择工作模式" clearable style="width:100%" > <el-option label="放电模式(0x01)" :value="1"></el-option> <el-option label="充电模式(0x10)" :value="16"></el-option> <el-option label="保护模式(0x21)" :value="33"></el-option> <el-option label="待机无输出模式(0x30)" :value="48"></el-option> <el-option label="待机预放电模式(0x31)" :value="49"></el-option> <el-option label="故障需返厂(0xFF)" :value="255"></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="最高温度(℃)" prop="batteryTemperatureMax"> <el-input-number v-model="dataForm.batteryTemperatureMax" :min="-50" :max="100" :precision="1" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="最低温度(℃)" prop="batteryTemperatureMin"> <el-input-number v-model="dataForm.batteryTemperatureMin" :min="-50" :max="100" :precision="1" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="最高电压(V)" prop="batteryVoltageMax"> <el-input-number v-model="dataForm.batteryVoltageMax" :min="0" :precision="2" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="最低电压(V)" prop="batteryVoltageMin"> <el-input-number v-model="dataForm.batteryVoltageMin" :min="0" :precision="2" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="循环次数" prop="batteryCycleTimes"> <el-input-number v-model="dataForm.batteryCycleTimes" :min="0" :precision="0" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> </el-col> </el-row> </el-form> </el-tab-pane> <el-tab-pane label="状态信息" name="status"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="180px" size="small" > <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="保护状态码" prop="batteryProtectCode"> <el-input v-model="dataForm.batteryProtectCode" placeholder="16位二进制保护状态码"> <el-tooltip slot="append" content="保护状态 bit16~bit 31 保留 bit15：Gsensor 故障 bit14：BMS 与 Tracker通讯超时 bit13: 预放电失败 bit12: IC保护 bit11: 智能充电通信超时 bit10：压差过大 bit9：温差过大 bit8：短路 bit7：充电过压 bit6：充电过流 bit5：放电欠压 bit4：放电过流 bit3：充电低温 bit2：充电高温 bit1：放电高温 bit0：放电低温" placement="top" :open-delay="500"> <el-button icon="el-icon-question"></el-button> </el-tooltip> </el-input> </el-form-item> <el-form-item label="故障状态码" prop="batteryErrorCode"> <el-input v-model="dataForm.batteryErrorCode" placeholder="16位二进制故障状态码"> <el-tooltip slot="append" content="转成2进制， 总共为16位，高8位为电池包工作状态，低8位为故障状态码 bit9BMS 与 Tracker通讯故障,bit8BMS 板 G sensor损坏,(8/9无效)bit7：失效,bit6：失衡,bit5：放电 MOS 损坏,bit4：充电 MOS 损坏,bit3IC 损坏,bit2：温度传感器损坏,bit1:采样线断线，虚焊等故障 保留，置 0,bit0：保留" placement="top" :open-delay="500"> <el-button icon="el-icon-question"></el-button> </el-tooltip> </el-input> </el-form-item> <el-form-item label="MOS状态" prop="mosStatus"> <el-input v-model="dataForm.mosStatus" placeholder="MOS状态"></el-input> </el-form-item> <el-form-item label="MOS温度(℃)" prop="mosTemp"> <el-input-number v-model="dataForm.mosTemp" :min="-50" :max="150" :precision="1" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="稳定状态" prop="steadyStatus"> <el-input v-model="dataForm.steadyStatus" placeholder="稳定状态"></el-input> </el-form-item> <el-form-item label="单体电压(V)" prop="cellVoltage"> <el-input-number v-model="dataForm.cellVoltage" :min="0" :precision="2" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="业务模式" prop="businessmode"> <el-select v-model="dataForm.businessmode" placeholder="请选择业务模式" clearable style="width:100%" > <el-option label="关机模式(1)" :value="1"></el-option> <el-option label="运营模式(2)" :value="2"></el-option> <el-option label="运输模式(3)" :value="3"></el-option> <el-option label="通讯充电模式(4)" :value="4"></el-option> <el-option label="盲充模式(5)" :value="5"></el-option> <el-option label="存储模式(6)" :value="6"></el-option> <el-option label="搜寻模式(7)" :value="7"></el-option> <el-option label="返厂模式(8)" :value="8"></el-option> </el-select> </el-form-item> <el-form-item label="数据标志" prop="flag"> <el-select v-model="dataForm.flag" placeholder="请选择数据标志" clearable style="width:100%" > <el-option label="设备主动上报(1)" :value="1"></el-option> <el-option label="平台主动推送(2)" :value="2"></el-option> <el-option label="平台指令反馈(3)" :value="3"></el-option> </el-select> </el-form-item> </el-col> </el-row> </el-form> </el-tab-pane> <el-tab-pane label="设备信息" name="device"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="180px" size="small" > <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="设备型号" prop="model"> <el-input v-model="dataForm.model" placeholder="设备型号"></el-input> </el-form-item> <el-form-item label="制造商" prop="manufacture"> <el-input v-model="dataForm.manufacture" placeholder="制造商"></el-input> </el-form-item> <el-form-item label="IMEI" prop="imei"> <el-input v-model="dataForm.imei" placeholder="IMEI"></el-input> </el-form-item> <el-form-item label="IMSI" prop="imsi"> <el-input v-model="dataForm.imsi" placeholder="IMSI"></el-input> </el-form-item> <el-form-item label="ICCID" prop="iccid"> <el-input v-model="dataForm.iccid" placeholder="ICCID"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="硬件版本" prop="trackerHardwareVersion"> <el-input v-model="dataForm.trackerHardwareVersion" placeholder="硬件版本"></el-input> </el-form-item> <el-form-item label="软件版本" prop="trackerSoftwareVersion"> <el-input v-model="dataForm.trackerSoftwareVersion" placeholder="软件版本"></el-input> </el-form-item> <el-form-item label="上报原因" prop="reportreason"> <el-input v-model="dataForm.reportreason" placeholder="上报原因"></el-input> </el-form-item> <el-form-item label="检测状态" prop="detstatus"> <el-input v-model="dataForm.detstatus" placeholder="检测状态"></el-input> </el-form-item> <el-form-item label="信号强度" prop="csq"> <el-input-number v-model="dataForm.csq" :min="0" :max="31" :precision="0" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> </el-col> </el-row> </el-form> </el-tab-pane> <el-tab-pane label="位置信息" name="location"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="180px" size="small" > <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="网络类型" prop="networkType"> <el-input v-model="dataForm.networkType" placeholder="网络类型"></el-input> </el-form-item> <el-form-item label="定位模式" prop="locationMode"> <el-input v-model="dataForm.locationMode" placeholder="定位模式"></el-input> </el-form-item> <el-form-item label="经度" prop="longitude"> <el-input-number v-model="dataForm.longitude" :min="-180" :max="180" :precision="6" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="经度方向" prop="longitudeDirection"> <el-select v-model="dataForm.longitudeDirection" placeholder="请选择方向" clearable style="width:100%" > <el-option label="东经(E)" value="E"></el-option> <el-option label="西经(W)" value="W"></el-option> </el-select> </el-form-item> <el-form-item label="纬度" prop="latitude"> <el-input-number v-model="dataForm.latitude" :min="-90" :max="90" :precision="6" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="纬度方向" prop="latitudeDirection"> <el-select v-model="dataForm.latitudeDirection" placeholder="请选择方向" clearable style="width:100%" > <el-option label="北纬(N)" value="N"></el-option> <el-option label="南纬(S)" value="S"></el-option> </el-select> </el-form-item> <el-form-item label="GPS速度(km/h)" prop="gpsSpeed"> <el-input-number v-model="dataForm.gpsSpeed" :min="0" :precision="2" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="GPS信号" prop="gpsSignal"> <el-input-number v-model="dataForm.gpsSignal" :min="0" :precision="0" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="卫星数量" prop="satelliteNum"> <el-input-number v-model="dataForm.satelliteNum" :min="0" :max="32" :precision="0" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="定位精度(m)" prop="accuracy"> <el-input-number v-model="dataForm.accuracy" :min="0" :precision="2" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> </el-col> </el-row> </el-form> </el-tab-pane> </el-tabs> <span slot="footer" class="dialog-footer"> <el-button @click="visible = false">取消</el-button> <el-button type="primary" @click="dataFormSubmit()">确定</el-button> </span> </el-dialog> </template> <script> export default { data () { // 验证16位二进制码的自定义规则 const validateBinary16 = (rule, value, callback) => { if (!value) { callback(new Error('不能为空')); } else if (!/^[01]{16}$/.test(value)) { callback(new Error('必须是16位二进制数（由0和1组成）')); } else { callback(); } }; return { visible: false, activeTab: 'basic', // 当前激活的标签页 dataForm: { id: 0, batteryKind: null, // 新增的电池类型字段 batteryId: '', batteryVoltage: '', batteryCurrent: '', batterySoc: '', batteryHardVersion: '', batterySoftVersion: '', batteryWorkMode: '', batteryProtectCode: '', batteryErrorCode: '', batteryTemperatureMax: '', batteryTemperatureMin: '', batteryVoltageMax: '', batteryVoltageMin: '', mosStatus: '', mosTemp: '', batteryCycleTimes: '', steadyStatus: '', cellVoltage: '', model: '', manufacture: '', imei: '', imsi: '', iccid: '', trackerHardwareVersion: '', trackerSoftwareVersion: '', reportreason: '', detstatus: '', csq: '', networkType: '', locationMode: '', longitude: '', longitudeDirection: '', latitude: '', latitudeDirection: '', gpsSpeed: '', gpsSignal: '', satelliteNum: '', accuracy: '', businessmode: '', flag: '', uploadTime: '', createTime: '', updateTime: '' }, dataRule: { batteryId: [ { required: true, message: '请输入电池ID', trigger: 'blur' } ], batteryKind: [ { required: true, message: '请选择电池类型', trigger: 'change' } ], batteryVoltage: [ { required: true, message: '请输入电池电压', trigger: 'blur' }, { type: 'number', message: '必须为数字值' } ], batteryCurrent: [ { required: true, message: '请输入电池电流', trigger: 'blur' }, { type: 'number', message: '必须为数字值' } ], batterySoc: [ { required: true, message: '请输入电池SOC', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: 0, max: 100 } ], batteryWorkMode: [ { required: true, message: '请选择工作模式', trigger: 'change' } ], batteryProtectCode: [ { required: true, validator: validateBinary16, trigger: 'blur' } ], batteryErrorCode: [ { required: true, validator: validateBinary16, trigger: 'blur' } ], batteryTemperatureMax: [ { required: true, message: '请输入最高温度', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: -50, max: 100 } ], batteryTemperatureMin: [ { required: true, message: '请输入最低温度', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: -50, max: 100 } ], batteryVoltageMax: [ { required: true, message: '请输入最高电压', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: 0 } ], batteryVoltageMin: [ { required: true, message: '请输入最低电压', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: 0 } ], mosStatus: [ { required: true, message: '请输入MOS状态', trigger: 'blur' } ], mosTemp: [ { required: true, message: '请输入MOS温度', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: -50, max: 150 } ], batteryCycleTimes: [ { required: true, message: '请输入循环次数', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: 0 } ], steadyStatus: [ { required: true, message: '请输入稳定状态', trigger: 'blur' } ], cellVoltage: [ { required: true, message: '请输入单体电压', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: 0 } ], model: [ { required: true, message: '请输入设备型号', trigger: 'blur' } ], manufacture: [ { required: true, message: '请输入制造商', trigger: 'blur' } ], imei: [ { required: true, message: '请输入IMEI', trigger: 'blur' } ], imsi: [ { required: true, message: '请输入IMSI', trigger: 'blur' } ], iccid: [ { required: true, message: '请输入ICCID', trigger: 'blur' } ], trackerHardwareVersion: [ { required: true, message: '请输入硬件版本', trigger: 'blur' } ], trackerSoftwareVersion: [ { required: true, message: '请输入软件版本', trigger: 'blur' } ], reportreason: [ { required: true, message: '请输入上报原因', trigger: 'blur' } ], detstatus: [ { required: true, message: '请输入检测状态', trigger: 'blur' } ], csq: [ { required: true, message: '请输入信号强度', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: 0, max: 31 } ], networkType: [ { required: true, message: '请输入网络类型', trigger: 'blur' } ], locationMode: [ { required: true, message: '请输入定位模式', trigger: 'blur' } ], longitude: [ { required: true, message: '请输入经度', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: -180, max: 180 } ], longitudeDirection: [ { required: true, message: '请选择经度方向', trigger: 'change' } ], latitude: [ { required: true, message: '请输入纬度', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: -90, max: 90 } ], latitudeDirection: [ { required: true, message: '请选择纬度方向', trigger: 'change' } ], gpsSpeed: [ { required: true, message: '请输入GPS速度', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: 0 } ], gpsSignal: [ { required: true, message: '请输入GPS信号', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: 0 } ], satelliteNum: [ { required: true, message: '请输入卫星数量', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: 0, max: 32 } ], accuracy: [ { required: true, message: '请输入定位精度', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: 0 } ], businessmode: [ { required: true, message: '请选择业务模式', trigger: 'change' } ], flag: [ { required: true, message: '请选择数据标志', trigger: 'change' } ], uploadTime: [ { required: true, message: '请选择上传时间', trigger: 'change' } ], createTime: [ { required: true, message: '请选择创建时间', trigger: 'change' } ], updateTime: [ { required: true, message: '请选择更新时间', trigger: 'change' } ] } } }, methods: { init (id) { this.dataForm.id = id || 0 this.visible = true this.$nextTick(() => { this.$refs['dataForm'].resetFields() if (this.dataForm.id) { this.$http({ url: this.$http.adornUrl(`/maya/mybatteryinfolastest/info/${this.dataForm.id}`), method: 'get', params: this.$http.adornParams() }).then(({data}) => { if (data && data.code === 0) { this.dataForm = { ...this.dataForm, ...data.myBatteryInfoLastest } } }) } }) }, // 重置表单 resetForm() { if (this.$refs['dataForm']) { this.$refs['dataForm'].resetFields(); this.activeTab = 'basic'; } }, // 表单提交 dataFormSubmit () { this.$refs['dataForm'].validate((valid) => { if (valid) { this.$http({ url: this.$http.adornUrl(`/maya/mybatteryinfolastest/${!this.dataForm.id ? 'save' : 'update'}`), method: 'post', data: this.$http.adornData({ ...this.dataForm }) }).then(({data}) => { if (data && data.code === 0) { this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { this.visible = false this.$emit('refreshDataList') } }) } else { this.$message.error(data.msg) } }) } }) } } } </script> <style scoped> .custom-dialog >>> .el-dialog__body { padding: 20px 30px; max-height: 70vh; overflow-y: auto; } .custom-dialog >>> .el-tabs--border-card { box-shadow: none; border: none; } .custom-dialog >>> .el-tabs__content { padding: 15px; } .custom-dialog >>> .el-tabs__item { font-weight: bold; } .custom-dialog >>> .el-tabs__item.is-active { color: #409EFF; background-color: #f5f7fa; } .custom-dialog >>> .el-tabs--border-card > .el-tabs__header { background-color: #f5f7fa; border-bottom: 1px solid #e4e7ed; } .custom-dialog >>> .el-form-item { margin-bottom: 20px; } .custom-dialog >>> .el-input-number { width: 100%; } .custom-dialog >>> .el-select { width: 100%; } </style> 根据这些Map<String, Object> mapinfo = new HashMap<String, Object>(); mapinfo.put("battery_id", device_id); //device_id mapinfo.put("upload_time", uploadtime); mapinfo.put("payload", data); mapinfo.put("create_time", DateUtils.getCurrentDateTime()); //mapinfo.put("topic", topic); if("getBatteryInfo".equals(topic_arr[5].trim())){ // 查询电池数据 //mapinfo.put("battery_id", data_arr[0]); //device_id //mapinfo.put("upload_time", uploadtime); //mapinfo.put("payload", data); mapinfo.put("imei", data_arr[1]); mapinfo.put("iccid", data_arr[2]); mapinfo.put("longitude_direction", data_arr[3]); mapinfo.put("longitude", data_arr[4]); mapinfo.put("latitude_direction", data_arr[5]); mapinfo.put("latitude", data_arr[6]); mapinfo.put("gpsSpeed", data_arr[7]); mapinfo.put("battery_soft_version", data_arr[8]); mapinfo.put("tracker_software_version", data_arr[9]); mapinfo.put("gps_signal", data_arr[10]); mapinfo.put("satellite_num", data_arr[11]); mapinfo.put("soc", data_arr[12]); mapinfo.put("battery_cycle_times", data_arr[13]); mapinfo.put("battery_temperature_max", data_arr[14]); mapinfo.put("battery_temperature_min", data_arr[15]); mapinfo.put("mos_temp", data_arr[16]); mapinfo.put("battery_voltage", data_arr[17]); mapinfo.put("battery_voltage_max", data_arr[18]); mapinfo.put("battery_voltage_min", data_arr[19]); mapinfo.put("battery_work_mode", data_arr[20]); mapinfo.put("mos_status", data_arr[21]); mapinfo.put("battery_current", data_arr[22]); mapinfo.put("cell_voltage", data_arr[23]); mapinfo.put("steady_status", data_arr[24]); mapinfo.put("battery_error_code", data_arr[25]); //mapinfo.put("create_time", DateUtils.getCurrentDateTime()); mapinfo.put("flag", 3); // 1：设备主动请求或上报 2：平台主动推送或下指令 3:平台指令反馈的结果 Integer batteryKind=(Integer) SqlUtils.queryInfoOne(Config.getConfigBean().getDatasourcesBean().getDatasourceBean().get(0).getAlias() , "getBatteryKindByImei", mapinfo); mapinfo.put("battery_kind",Objects.isNull(batteryKind)?2:batteryKind);有的字段全部判断为不可编辑，除了电池类型，帮我修改该页面
07-22
在Element UI/Element Plus中，如何设置表单字段的禁用状态？ 2. 如何动态控制el-form中某些字段的编辑状态？ 3. 在Vue项目中，如何根据条件禁用表单字段？在 Vue 组件中使用 Element Plus 的 el-form 实现部分...
<template> <el-dialog title="提示" v-model="visible" width="25%"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px"> <el-form-item label="原密码" prop="password"> <el-input type="password" v-model="dataForm.password" size="medium" clearable /> </el-form-item> <el-form-item label="新密码" prop="newPassword"> <el-input type="password" v-model="dataForm.newPassword" size="medium" clearable /> </el-form-item> <el-form-item label="确认密码" prop="confirmPassword"> <el-input type="password" v-model="dataForm.confirmPassword" size="medium" clearable /> </el-form-item> </el-form> <template #footer> <span class="dialog-footer"> <el-button size="medium" @click="visible = false">取消</el-button> <el-button type="primary" size="medium" @click="dataFormSubmit">确定</el-button> </span> </template> </el-dialog> </template> <script> export default { data() { const validateConfirmPassword = (rule, value, callback) => { if (value != this.dataForm.newPassword) { callback(new Error('两次输入的密码不一致')); } else { callback(); } }; return { visible: false, dataForm: { password: '', newPassword: '', confirmPassword: '' }, dataRule: { password: [{ required: true, pattern: '^[a-zA-Z0-9]{6,20}$', message: '密码格式错误' }], newPassword: [{ required: true, pattern: '^[a-zA-Z0-9]{6,20}$', message: '密码格式错误' }], confirmPassword: [ { required: true, pattern: '^[a-zA-Z0-9]{6,20}$', message: '密码格式错误' }, { validator: validateConfirmPassword, trigger: 'blur' } ] } }; }, methods: { init: function() { this.visible = true //显示弹窗 //因为清空表单控件是异步的，所以把清空表单控件放在下次DOM更新循环中 this.$nextTick((
03-16
同时，确保对话框能够正常显示和关闭，表单提交后重置表单数据。在Vue.js中使用Element UI实现密码修改对话框的验证逻辑，可以按照以下步骤实现： ### 一、基础结构搭建 ```vue <el-dialog title="修改密码" :...
没有弹窗提示
07-22
this.$refs['dataForm'].resetFields(); this.activeTab = 'basic'; this.submitting = false; } }, // 表单提交 dataFormSubmit () { this.submitting = true; // 开始提交 this.$refs['dataForm']....
通过条件判断显示的form表单，必填校验已填数据但是红框请输入不消失，无法通过校验
最新发布
10-23
3. 如何全局重置表单校验状态并清除错误提示？ 4. 动态表单字段校验失败时如何精确定位问题？ [^1]: Vue 表单条件校验规则实现 [^2]: 表单提交校验的正确处理方式 [^3]: 嵌套对象属性和动态规则更新 [^4]: ...
this.$refs[‘form’].resetFields()方法重置表单无效的坑
m0_45858045的博客
02-16 2262
要想this.$refs[‘form’].resetFields()方法有效，必须配置el-form :model 属性和el-form-item中的prop属性，才可以。注意：this.$refs[‘form’].resetFields()这个做法其实是重置表单到初始值，不是清空表单，当表单第一次在页面中渲染时所用的数据就是初始数据。
element-ui的resetFields()方法不生效的原因及解决方法
qq_45791192的博客
11-30 358
https://blog.csdn.net/baidu_23275675/article/details/106196253
vue项目表单中使用resetFields()报错或未生效
蚂蚁搬砖我砌墙
10-07 1万+
使用resetFields()报错或未生效的解决方案
vue项目element-ui问题：“Cannot read property ‘resetFields‘/‘clearValidate‘ of undefined“问题解决
учёба
03-30 1561
vue项目element-ui问题："Cannot read property 'resetFields'/'clearValidate' of undefined"问题解决
this.$refs 获取不到解决办法
热门推荐
poppymilan的博客
09-07 4万+
问题描述 页面一进来初始化之后，需要通过获取this.$refs 调用子组件中的某个方法，但是获取不到，返回undefind 解决过程： 楼主查询了原因，是这样解释的： ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。 如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。 这里就涉及到VUE生命周期的
elmetui在关闭弹窗 使用 this.$refs[‘elForm‘].resetFields()方法重置表单不生效的原因及解决方法
Yhlhn的博客
06-25 910
当我们第一次打开Dialog，紧接着设置回显，因为Dialog还没执行完毕，这时form的初始值会被设置为回显的值，所以在调用this.$ref['form'] .resetFields()时form看起来没有重置。element-ui的官方文档：调用编辑的时候，表单的初始值被设置为回显的值，每次重置时只是重置为初始值，不是空值。解决：在form上添加ref，需要与this.$ref['form'] 中名称一致。解决：prop属性需要与data绑定的属性一致。1.表单上没有添加ref属性。
Error in v-on handler: “Error: please transfer a valid prop path to form item
ml_try的博客
12-21 4343
vue 数组splise 元素渲染
this.$refs[form].resetFields() 不生效
qq_25239049的博客
10-14 4836
所以，在 form mounted之前，如果给form表单赋值了，那么后面调用resetFields()都是无效的，因为form表单的初始值已经在 mounted 之前就被赋值了。而这个初始值是在form mounted生命周期被赋值上去的。1.el-form-item 没写prop。此方法用于将form表单的数据设置为初始值。
element ui 新增和编辑公用组件表单 this.$refs.form.resetFields() 重置表单无效
m0_53026489的博客
07-17 241
新增和编辑公用一个弹框，在页面首次打开时新增的弹框里面没数据，但是在打开一条数据修改的弹框，无论保没保存，再次打开新增，里面的数据是上次取消编辑的那条数据。
element-admin中的this.$refs是做什么的
06-10
在 Element-Admin 中，`this.$refs` 是一个 Vue 实例属性，它用于访问组件中的 DOM 元素或子组件实例。具体来说，`this.$refs` 可以访问到组件中所有有 `ref` 属性的子元素或子组件。 例如，在以下代码中，`this.$...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

路痴不脸盲

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值