vue3 el-tab-pane 禁用状态下 el-tooltip 失效的问题

Vue3中el-tab-pane禁用时el-tooltip失效问题
最新推荐文章于 2025-09-05 10:37:26 发布
原创 最新推荐文章于 2025-09-05 10:37:26 发布 · 180 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端 

<el-tab-pane name="data" disabled>
  <template #label>
    <el-tooltip content="~暂未开通~" placement="top">
      <span class="disabled-label">数据角色</span>
    </el-tooltip>
  </template>
</el-tab-pane>


.disabled-label {
  pointer-events: auto; /* 启用鼠标事件 */
  opacity: 0.6; /* 模拟禁用视觉效果 */
  cursor: not-allowed; /* 显示禁用光标 */
}
vue+element-ui el-tabs切换面板el-tab-pane切换
花椒和蕊的博客
03-01 1万+
在vue项目中，el-tabs在页面的右侧显示，切换面板，下面的内容是正常显示的 效果如下： 代码如下： 父组件 <el-card> <span>数据信息</span> <el-tabs class="tabRight" v-model="activeName" type="card" @tab-click="handleClick"
el-tab-pane实现单击某个tab请求某个活动标签的接口（防止在父组件请求了全部接口，数据量大的时候会造成请求超时）
CPUyi的博客
09-20 1243
el-tab-pane实现单击某个tab请求某个活动标签的接口（防止在父组件请求了全部接口，数据量大的时候会造成请求超时）
使用el-tabs组件显示多个菜单页面
最新发布
IT诗人
09-05 371
以el-tabs组件实现同时打开多个菜单页面，并支持切换移除菜单页面等
Element Tabs 标签页 ------disabled使用
sunnyboysix的博客
07-26 3464
话不多说直接上代码 菜鸟继续赶路 加油
vue3导航栏
weixin_50249353的博客
06-13 554
代码如下 包含了样式 关闭等功能。
Vue里使用Element UI的Tabs時el-tab-pane的隱藏和顯示
热门推荐
losedguest的博客
04-26 3万+
1.效果圖 隱藏相關項后 <el-tabs v-model="selectTab" ref="tabs" type="border-card" tab-position="top" @tab-click="handleTabClick"> <el-tab-pane name="0" :label="$t('main.vie...
<template> <el-dialog :title="!dataForm.id ? &#39;新增电池信息&#39; : &#39;修改电池信息&#39;" :visible.sync="visible" width="90%" top="5vh" custom-class="battery-form-dialog" > <!-- 使用标签页布局 --> <el-tabs v-model="activeTab" type="card" tab-position="top"> <!-- 电池基本信息 --> <el-tab-pane label="基本信息" name="1"> <div class="form-grid"> <el-form-item label="电池ID" prop="batteryId"> <el-input v-model="dataForm.batteryId" disabled> <i slot="prefix" class="el-icon-files"></i> </el-input> </el-form-item> <el-form-item label="电压(V)" prop="batteryVoltage"> <el-input v-model="dataForm.batteryVoltage" type="number" disabled> <i slot="prefix" class="el-icon-data-line"></i> </el-input> </el-form-item> <el-form-item label="电流(A)" prop="batteryCurrent"> <el-input v-model="dataForm.batteryCurrent" type="number" disabled> <i slot="prefix" class="el-icon-sort"></i> </el-input> </el-form-item> <el-form-item label="SOC(%)" prop="batterySoc"> <el-input v-model="dataForm.batterySoc" type="number" min="0" max="100" disabled> <i slot="prefix" class="el-icon-pie-chart"></i> </el-input> </el-form-item> <el-form-item label="硬件版本" prop="batteryHardVersion"> <el-input v-model="dataForm.batteryHardVersion" disabled> <i slot="prefix" class="el-icon-cpu"></i> </el-input> </el-form-item> <el-form-item label="软件版本" prop="batterySoftVersion"> <el-input v-model="dataForm.batterySoftVersion" disabled> <i slot="prefix" class="el-icon-setting"></i> </el-input> </el-form-item> </div> </el-tab-pane> <!-- 电池状态信息 --> <el-tab-pane label="状态信息" name="2"> <div class="form-grid"> <el-form-item label="工作模式" prop="batteryWorkMode"> <el-select v-model="dataForm.batteryWorkMode" disabled> <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-form-item label="电池类型" prop="batteryKind"> <el-select v-model="dataForm.batteryKind"> <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="保护状态码" prop="batteryProtectCode"> <el-tooltip effect="dark" placement="top"> <div slot="content"> bit0: 放电低温 | bit1: 放电高温 | bit2: 充电高温<br> bit3: 充电低温 | bit4: 放电过流 | bit5: 放电欠压<br> bit6: 充电过流 | bit7: 充电过压 | bit8: 短路<br> bit9: 温差过大 | bit10: 压差过大 | bit11: 智能充电通信超时<br> bit12: IC保护 | bit13: 预放电失败 | bit14: BMS与Tracker通讯超时<br> bit15: Gsensor故障 | bit16~31: 保留 </div> <el-input v-model="dataForm.batteryProtectCode" disabled> <i slot="prefix" class="el-icon-warning"></i> </el-input> </el-tooltip> </el-form-item> <el-form-item label="错误状态码" prop="batteryErrorCode"> <el-tooltip effect="dark" placement="top"> <div slot="content"> 低8位故障状态码:<br> bit0: 保留 | bit1: 采样线故障 | bit2: 温度传感器损坏<br> bit3: IC损坏 | bit4: 充电MOS损坏 | bit5: 放电MOS损坏<br> bit6: 失衡 | bit7: 失效<br> 高8位工作状态:<br> bit8: G sensor损坏 | bit9: BMS与Tracker通讯故障 </div> <el-input v-model="dataForm.batteryErrorCode" disabled> <i slot="prefix" class="el-icon-warning-outline"></i> </el-input> </el-tooltip> </el-form-item> </div> </el-tab-pane> <!-- 温度电压信息 --> <el-tab-pane label="温度电压" name="3"> <div class="form-grid"> <el-form-item label="最高温度(℃)" prop="batteryTemperatureMax"> <el-input v-model="dataForm.batteryTemperatureMax" type="number" disabled> <i slot="prefix" class="el-icon-sunny"></i> </el-input> </el-form-item> <el-form-item label="最低温度(℃)" prop="batteryTemperatureMin"> <el-input v-model="dataForm.batteryTemperatureMin" type="number" disabled> <i slot="prefix" class="el-icon-cold-drink"></i> </el-input> </el-form-item> <el-form-item label="最高电压(V)" prop="batteryVoltageMax"> <el-input v-model="dataForm.batteryVoltageMax" type="number" disabled> <i slot="prefix" class="el-icon-top"></i> </el-input> </el-form-item> <el-form-item label="最低电压(V)" prop="batteryVoltageMin"> <el-input v-model="dataForm.batteryVoltageMin" type="number" disabled> <i slot="prefix" class="el-icon-bottom"></i> </el-input> </el-form-item> </div> </el-tab-pane> <!-- 设备信息 --> <el-tab-pane label="设备信息" name="4"> <div class="form-grid"> <el-form-item label="设备型号" prop="model"> <el-input v-model="dataForm.model" disabled> <i slot="prefix" class="el-icon-mobile"></i> </el-input> </el-form-item> <el-form-item label="制造商" prop="manufacture"> <el-input v-model="dataForm.manufacture" disabled> <i slot="prefix" class="el-icon-office-building"></i> </el-input> </el-form-item> <el-form-item label="IMEI" prop="imei"> <el-input v-model="dataForm.imei" disabled> <i slot="prefix" class="el-icon-phone"></i> </el-input> </el-form-item> <el-form-item label="IMSI" prop="imsi"> <el-input v-model="dataForm.imsi" disabled> <i slot="prefix" class="el-icon-sim-card"></i> </el-input> </el-form-item> <el-form-item label="ICCID" prop="iccid"> <el-input v-model="dataForm.iccid" disabled> <i slot="prefix" class="el-icon-credit-card"></i> </el-input> </el-form-item> </div> </el-tab-pane> <!-- GPS定位信息 --> <el-tab-pane label="GPS定位" name="5"> <div class="form-grid"> <el-form-item label="经度" prop="longitude"> <el-input v-model="dataForm.longitude" type="number" disabled> <i slot="prefix" class="el-icon-place"></i> </el-input> </el-form-item> <el-form-item label="经度方向" prop="longitudeDirection"> <el-select v-model="dataForm.longitudeDirection" disabled> <el-option label="东经" value="E"></el-option> <el-option label="西经" value="W"></el-option> </el-select> </el-form-item> <el-form-item label="纬度" prop="latitude"> <el-input v-model="dataForm.latitude" type="number" disabled> <i slot="prefix" class="el-icon-place"></i> </el-input> </el-form-item> <el-form-item label="纬度方向" prop="latitudeDirection"> <el-select v-model="dataForm.latitudeDirection" disabled> <el-option label="北纬" value="N"></el-option> <el-option label="南纬" value="S"></el-option> </el-select> </el-form-item> </div> </el-tab-pane> <!-- 业务信息 --> <el-tab-pane label="业务信息" name="6"> <div class="form-grid"> <el-form-item label="业务模式" prop="businessmode"> <el-select v-model="dataForm.businessmode" disabled> <el-option v-for="mode in businessModes" :key="mode.value" :label="mode.label" :value="mode.value"></el-option> </el-select> </el-form-item> <el-form-item label="处理状态" prop="handled"> <el-select v-model="dataForm.handled" disabled> <el-option label="已处理" :value="1"></el-option> <el-option label="待处理" :value="0"></el-option> </el-select> </el-form-item> <el-form-item label="执行方式" prop="todoNow"> <el-select v-model="dataForm.todoNow" disabled> <el-option label="立即执行" :value="1"></el-option> <el-option label="等待执行" :value="0"></el-option> </el-select> </el-form-item> <el-form-item label="需要回复" prop="needack"> <el-select v-model="dataForm.needack" disabled> <el-option label="是" :value="1"></el-option> <el-option label="否" :value="0"></el-option> </el-select> </el-form-item> <el-form-item label="消息类型" prop="flag"> <el-select v-model="dataForm.flag" disabled> <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> </div> </el-tab-pane> <!-- 其他信息 --> <el-tab-pane label="其他信息" name="7"> <div class="form-grid"> <el-form-item label="原始数据" prop="payload"> <el-input v-model="dataForm.payload" type="textarea" :rows="4" disabled></el-input> </el-form-item> </div> </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() { return { visible: false, activeTab: &#39;1&#39;, dataForm: { id: 0, batteryId: &#39;&#39;, batteryVoltage: &#39;&#39;, batteryCurrent: &#39;&#39;, batterySoc: &#39;&#39;, batteryHardVersion: &#39;&#39;, batterySoftVersion: &#39;&#39;, batteryWorkMode: &#39;&#39;, batteryKind: "0", batteryProtectCode: &#39;&#39;, batteryErrorCode: &#39;&#39;, batteryTemperatureMax: &#39;&#39;, batteryTemperatureMin: &#39;&#39;, batteryVoltageMax: &#39;&#39;, batteryVoltageMin: &#39;&#39;, mosStatus: &#39;&#39;, mosTemp: &#39;&#39;, batteryCycleTimes: &#39;&#39;, steadyStatus: &#39;&#39;, cellVoltage: &#39;&#39;, model: &#39;&#39;, manufacture: &#39;&#39;, imei: &#39;&#39;, imsi: &#39;&#39;, iccid: &#39;&#39;, trackerHardwareVersion: &#39;&#39;, trackerSoftwareVersion: &#39;&#39;, csq: &#39;&#39;, networkType: &#39;&#39;, locationMode: &#39;&#39;, longitude: &#39;&#39;, longitudeDirection: &#39;&#39;, latitude: &#39;&#39;, latitudeDirection: &#39;&#39;, gpsSpeed: &#39;&#39;, gpsSignal: &#39;&#39;, satelliteNum: &#39;&#39;, accuracy: &#39;&#39;, flag: &#39;&#39;, clientId: &#39;&#39;, topic: &#39;&#39;, productKey: &#39;&#39;, handled: &#39;&#39;, todoNow: &#39;&#39;, needack: &#39;&#39;, businessmode: &#39;&#39;, uploadTime: &#39;&#39;, createTime: &#39;&#39;, updateTime: &#39;&#39;, payload: &#39;&#39; }, businessModes: [ { value: 1, label: "关机模式" }, { value: 2, label: "运营模式" }, { value: 3, label: "运输模式" }, { value: 4, label: "通讯充电模式" }, { value: 5, label: "盲充模式" }, { value: 6, label: "存储模式" }, { value: 7, label: "搜寻模式" }, { value: 8, label: "返厂模式" } ], /* dataRule: { batteryId: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], batteryVoltage: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], batteryCurrent: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], batterySoc: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], batteryHardVersion: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], batterySoftVersion: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], batteryWorkMode: [ { required: true, message: &#39;0x01(1):放电模式 0x10(16):充电模式 0x21(33):保护模式 0x30(48):待机无输出模式 0x31(49):待机预放电模式 0xFF(255):故障需返厂不能为空&#39;, trigger: &#39;blur&#39; } ], batteryProtectCode: [ { required: true, message: &#39;保护状态 bit16~bit 31 保留 bit15：Gsensor 故障 bit14：BMS 与 Tracker通讯超时 bit13: 预放电失败 bit12: IC保护 bit11: 智能充电通信超时 bit10：压差过大 bit9：温差过大 bit8：短路 bit7：充电过压 bit6：充电过流 bit5：放电欠压 bit4：放电过流 bit3：充电低温 bit2：充电高温 bit1：放电高温 bit0：放电低温不能为空&#39;, trigger: &#39;blur&#39; } ], batteryErrorCode: [ { required: true, message: &#39;转成2进制， 总共为16位，高8位为电池包工作状态，低8位为故障状态码 bit9BMS 与 Tracker通讯故障,bit8BMS 板 G sensor损坏,(8/9无效)bit7：失效,bit6：失衡,bit5：放电 MOS 损坏,bit4：充电 MOS 损坏,bit3IC 损坏,bit2：温度传感器损坏,bit1:采样线断线，虚焊等故障 保留，置 0,bit0：保留不能为空&#39;, trigger: &#39;blur&#39; } ], batteryTemperatureMax: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], batteryTemperatureMin: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], batteryVoltageMax: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], batteryVoltageMin: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], mosStatus: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], mosTemp: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], batteryCycleTimes: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], steadyStatus: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], cellVoltage: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], model: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], manufacture: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], imei: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], imsi: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], iccid: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], trackerHardwareVersion: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], trackerSoftwareVersion: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], csq: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], networkType: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], locationMode: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], longitude: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], longitudeDirection: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], latitude: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], latitudeDirection: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], gpsSpeed: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], gpsSignal: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], satelliteNum: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], accuracy: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], flag: [ { required: true, message: &#39;1：设备主动请求或上报 2：平台主动推送或下指令 3:平台指令反馈的结果不能为空&#39;, trigger: &#39;blur&#39; } ], clientId: [ { required: true, message: &#39;MQTT发布消息所需的clientId不能为空&#39;, trigger: &#39;blur&#39; } ], topic: [ { required: true, message: &#39;MQTT主题不能为空&#39;, trigger: &#39;blur&#39; } ], productKey: [ { required: true, message: &#39;主题名称中需要的productKey不能为空&#39;, trigger: &#39;blur&#39; } ], handled: [ { required: true, message: &#39;配置是否处理 1：已处理 0：待处理不能为空&#39;, trigger: &#39;blur&#39; } ], todoNow: [ { required: true, message: &#39;是否立即执行 0：等待执行 1：立即执行不能为空&#39;, trigger: &#39;blur&#39; } ], needack: [ { required: true, message: &#39;是否回复不能为空&#39;, trigger: &#39;blur&#39; } ], businessmode: [ { required: true, message: &#39;业务模式 1:关机模式 2：运营模式 3：运输模式 4：通讯充电模式 5：盲充模式 6：存储模式 7：搜寻模式 8：返厂模式不能为空&#39;, trigger: &#39;blur&#39; } ], uploadTime: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], createTime: [ { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; } ], updateTime: [ { required: true, message: &#39;更新时间不能为空&#39;, trigger: &#39;blur&#39; } ], payload: [ { required: true, message: &#39;原始数据不能为空&#39;, trigger: &#39;blur&#39; } ] } */ } }, computed: { // 处理状态标签 handledLabel() { return this.dataForm.handled === 1 ? "已处理" : this.dataForm.handled === 0 ? "待处理" : ""; }, // 执行方式标签 todoNowLabel() { return this.dataForm.todoNow === 1 ? "立即执行" : this.dataForm.todoNow === 0 ? "等待执行" : ""; }, // 需要回复标签 needackLabel() { return this.dataForm.needack === 1 ? "是" : this.dataForm.needack === 0 ? "否" : ""; }, // 业务模式标签 businessModeLabel() { const mode = this.businessModes.find(m => m.value == this.dataForm.businessmode); return mode ? mode.label : ""; }, // 消息类型标签 flagLabel() { switch (this.dataForm.flag) { case 1: return "设备主动请求或上报"; case 2: return "平台主动推送或下指令"; case 3: return "平台指令反馈的结果"; default: return ""; } } }, methods: { init (id) { this.dataForm.id = id || 0 this.visible = true this.$nextTick(() => { this.$refs[&#39;dataForm&#39;].resetFields() if (this.dataForm.id) { this.$http({ url: this.$http.adornUrl(`/maya/mybatteryinfo/info/${this.dataForm.id}`), method: &#39;get&#39;, params: this.$http.adornParams() }).then(({data}) => { if (data && data.code === 0) { this.dataForm.batteryId = data.myBatteryInfo.batteryId this.dataForm.batteryVoltage = data.myBatteryInfo.batteryVoltage this.dataForm.batteryCurrent = data.myBatteryInfo.batteryCurrent this.dataForm.batterySoc = data.myBatteryInfo.batterySoc this.dataForm.batteryHardVersion = data.myBatteryInfo.batteryHardVersion this.dataForm.batterySoftVersion = data.myBatteryInfo.batterySoftVersion this.dataForm.batteryWorkMode = data.myBatteryInfo.batteryWorkMode this.dataForm.batteryKind = String(data.myBatteryInfo.batteryKind); this.dataForm.batteryProtectCode = data.myBatteryInfo.batteryProtectCode this.dataForm.batteryErrorCode = data.myBatteryInfo.batteryErrorCode this.dataForm.batteryTemperatureMax = data.myBatteryInfo.batteryTemperatureMax this.dataForm.batteryTemperatureMin = data.myBatteryInfo.batteryTemperatureMin this.dataForm.batteryVoltageMax = data.myBatteryInfo.batteryVoltageMax this.dataForm.batteryVoltageMin = data.myBatteryInfo.batteryVoltageMin this.dataForm.mosStatus = data.myBatteryInfo.mosStatus this.dataForm.mosTemp = data.myBatteryInfo.mosTemp this.dataForm.batteryCycleTimes = data.myBatteryInfo.batteryCycleTimes this.dataForm.steadyStatus = data.myBatteryInfo.steadyStatus this.dataForm.cellVoltage = data.myBatteryInfo.cellVoltage this.dataForm.model = data.myBatteryInfo.model this.dataForm.manufacture = data.myBatteryInfo.manufacture this.dataForm.imei = data.myBatteryInfo.imei this.dataForm.imsi = data.myBatteryInfo.imsi this.dataForm.iccid = data.myBatteryInfo.iccid this.dataForm.trackerHardwareVersion = data.myBatteryInfo.trackerHardwareVersion this.dataForm.trackerSoftwareVersion = data.myBatteryInfo.trackerSoftwareVersion this.dataForm.csq = data.myBatteryInfo.csq this.dataForm.networkType = data.myBatteryInfo.networkType this.dataForm.locationMode = data.myBatteryInfo.locationMode this.dataForm.longitude = data.myBatteryInfo.longitude this.dataForm.longitudeDirection = data.myBatteryInfo.longitudeDirection this.dataForm.latitude = data.myBatteryInfo.latitude this.dataForm.latitudeDirection = data.myBatteryInfo.latitudeDirection this.dataForm.gpsSpeed = data.myBatteryInfo.gpsSpeed this.dataForm.gpsSignal = data.myBatteryInfo.gpsSignal this.dataForm.satelliteNum = data.myBatteryInfo.satelliteNum this.dataForm.accuracy = data.myBatteryInfo.accuracy this.dataForm.flag = data.myBatteryInfo.flag this.dataForm.clientId = data.myBatteryInfo.clientId this.dataForm.topic = data.myBatteryInfo.topic this.dataForm.productKey = data.myBatteryInfo.productKey this.dataForm.handled = data.myBatteryInfo.handled this.dataForm.todoNow = data.myBatteryInfo.todoNow this.dataForm.needack = data.myBatteryInfo.needack this.dataForm.businessmode = data.myBatteryInfo.businessmode this.dataForm.uploadTime = data.myBatteryInfo.uploadTime this.dataForm.createTime = data.myBatteryInfo.createTime this.dataForm.updateTime = data.myBatteryInfo.updateTime this.dataForm.payload = data.myBatteryInfo.payload } }) } }) }, // 表单提交 dataFormSubmit () { this.$refs[&#39;dataForm&#39;].validate((valid) => { if (valid) { this.$http({ url: this.$http.adornUrl(`/maya/mybatteryinfo/${!this.dataForm.id ? &#39;save&#39; : &#39;update&#39;}`), method: &#39;post&#39;, data: this.$http.adornData({ &#39;id&#39;: this.dataForm.id || undefined, &#39;batteryId&#39;: this.dataForm.batteryId, &#39;batteryVoltage&#39;: this.dataForm.batteryVoltage, &#39;batteryCurrent&#39;: this.dataForm.batteryCurrent, &#39;batterySoc&#39;: this.dataForm.batterySoc, &#39;batteryHardVersion&#39;: this.dataForm.batteryHardVersion, &#39;batterySoftVersion&#39;: this.dataForm.batterySoftVersion, &#39;batteryWorkMode&#39;: this.dataForm.batteryWorkMode, &#39;batteryKind&#39;: Number(this.dataForm.batteryKind), &#39;batteryProtectCode&#39;: this.dataForm.batteryProtectCode, &#39;batteryErrorCode&#39;: this.dataForm.batteryErrorCode, &#39;batteryTemperatureMax&#39;: this.dataForm.batteryTemperatureMax, &#39;batteryTemperatureMin&#39;: this.dataForm.batteryTemperatureMin, &#39;batteryVoltageMax&#39;: this.dataForm.batteryVoltageMax, &#39;batteryVoltageMin&#39;: this.dataForm.batteryVoltageMin, &#39;mosStatus&#39;: this.dataForm.mosStatus, &#39;mosTemp&#39;: this.dataForm.mosTemp, &#39;batteryCycleTimes&#39;: this.dataForm.batteryCycleTimes, &#39;steadyStatus&#39;: this.dataForm.steadyStatus, &#39;cellVoltage&#39;: this.dataForm.cellVoltage, &#39;model&#39;: this.dataForm.model, &#39;manufacture&#39;: this.dataForm.manufacture, &#39;imei&#39;: this.dataForm.imei, &#39;imsi&#39;: this.dataForm.imsi, &#39;iccid&#39;: this.dataForm.iccid, &#39;trackerHardwareVersion&#39;: this.dataForm.trackerHardwareVersion, &#39;trackerSoftwareVersion&#39;: this.dataForm.trackerSoftwareVersion, &#39;csq&#39;: this.dataForm.csq, &#39;networkType&#39;: this.dataForm.networkType, &#39;locationMode&#39;: this.dataForm.locationMode, &#39;longitude&#39;: this.dataForm.longitude, &#39;longitudeDirection&#39;: this.dataForm.longitudeDirection, &#39;latitude&#39;: this.dataForm.latitude, &#39;latitudeDirection&#39;: this.dataForm.latitudeDirection, &#39;gpsSpeed&#39;: this.dataForm.gpsSpeed, &#39;gpsSignal&#39;: this.dataForm.gpsSignal, &#39;satelliteNum&#39;: this.dataForm.satelliteNum, &#39;accuracy&#39;: this.dataForm.accuracy, &#39;flag&#39;: this.dataForm.flag, &#39;clientId&#39;: this.dataForm.clientId, &#39;topic&#39;: this.dataForm.topic, &#39;productKey&#39;: this.dataForm.productKey, &#39;handled&#39;: this.dataForm.handled, &#39;todoNow&#39;: this.dataForm.todoNow, &#39;needack&#39;: this.dataForm.needack, &#39;businessmode&#39;: this.dataForm.businessmode, &#39;uploadTime&#39;: this.dataForm.uploadTime, &#39;createTime&#39;: this.dataForm.createTime, &#39;updateTime&#39;: this.dataForm.updateTime, &#39;payload&#39;: this.dataForm.payload }) }).then(({data}) => { if (data && data.code === 0) { this.$message({ message: &#39;操作成功&#39;, type: &#39;success&#39;, duration: 1500, onClose: () => { this.visible = false this.$emit(&#39;refreshDataList&#39;) } }) } else { this.$message.error(data.msg) } }) } }) } } } </script> <style> .battery-form-dialog { font-family: &#39;Segoe UI&#39;, &#39;PingFang SC&#39;, &#39;Microsoft YaHei&#39;, sans-serif; color: #1a1a1a; } /* 标签页样式优化 */ .battery-form-dialog .el-tabs__item { font-weight: 600 !important; font-size: 15px !important; padding: 0 20px !important; height: 40px; line-height: 40px; color: #555; } .battery-form-dialog .el-tabs__item.is-active { color: #1a73e8 !important; border-bottom: 3px solid #1a73e8 !important; } .battery-form-dialog .el-tabs__header { margin-bottom: 20px; } /* 网格布局 - 横向排列 */ .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px 30px; padding: 15px; } /* 表单标签优化 */ .battery-form-dialog .el-form-item__label { display: block; font-weight: 600 !important; color: #1a1a1a !important; font-size: 14px !important; padding-bottom: 6px !important; margin-bottom: 0 !important; letter-spacing: 0.5px; } /* 输入框优化 */ .battery-form-dialog .el-input__inner, .battery-form-dialog .el-textarea__inner, .battery-form-dialog .el-select .el-input__inner { font-size: 15px !important; color: #222 !important; font-weight: 500 !important; border: 1px solid #dcdfe6 !important; background-color: #f8fafc !important; height: 40px; line-height: 40px; border-radius: 4px; } /* 文本域样式 */ .battery-form-dialog .el-textarea__inner { min-height: 100px; line-height: 1.5; padding: 10px 15px; font-family: monospace; } /* 禁用状态优化 */ .battery-form-dialog .el-input.is-disabled .el-input__inner, .battery-form-dialog .el-textarea.is-disabled .el-textarea__inner, .battery-form-dialog .el-select.is-disabled .el-input__inner { color: #444 !important; background-color: #f0f4f8 !important; border-color: #e4e7ed !important; opacity: 1; } /* 图标颜色优化 */ .battery-form-dialog .el-input__prefix { color: #1a73e8 !important; font-size: 16px; display: flex; align-items: center; padding-left: 8px; } /* 按钮优化 */ .battery-form-dialog .el-button { font-weight: 600; padding: 10px 20px; border-radius: 4px; font-size: 14px; min-width: 100px; transition: all 0.3s; } .battery-form-dialog .el-button--default { border-color: #dcdfe6; } .battery-form-dialog .el-button--primary { background-color: #1a73e8; border-color: #1a73e8; } .battery-form-dialog .el-button--primary:hover { background-color: #0d62c9; border-color: #0d62c9; } /* 标题优化 */ .battery-form-dialog .el-dialog__title { font-size: 18px !important; font-weight: 700 !important; color: #1a1a1a !important; letter-spacing: 0.5px; } /* 提示工具样式 */ .battery-form-dialog .el-tooltip__popper { max-width: 400px; font-size: 13px; line-height: 1.6; background-color: #2c3e50; color: #ecf0f1; } .battery-form-dialog .el-tooltip__popper[x-placement^="top"] .popper__arrow { border-top-color: #2c3e50; } /* 错误提示样式 */ .battery-form-dialog .el-form-item__error { color: #f56c6c; font-size: 12px; padding-top: 4px; } /* 响应式调整 */ @media (max-width: 1200px) { .form-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } } @media (max-width: 992px) { .form-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } } @media (max-width: 768px) { .battery-form-dialog { width: 95% !important; } .form-grid { grid-template-columns: 1fr; } .battery-form-dialog .el-tabs__item { font-size: 13px !important; padding: 0 10px !important; } } </style>修复该页面，并给我完整胡代码
07-22
但是，我们注意到在模板中，每个标签页内的表单字段都是直接放在`el-tab-pane`下的，而`el-form`要求其直接子节点是`el-form-item`，但这里我们使用了`div.form-grid`包裹。这不会影响验证，因为`el-form`会递归...
<template> <el-dialog :title="!dataForm.id ? &#39;新增电池信息&#39; : &#39;修改电池信息&#39;" :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(&#39;不能为空&#39;)); } else if (!/^[01]{16}$/.test(value)) { callback(new Error(&#39;必须是16位二进制数（由0和1组成）&#39;)); } else { callback(); } }; return { visible: false, activeTab: &#39;basic&#39;, // 当前激活的标签页 dataForm: { id: 0, batteryKind: null, // 新增的电池类型字段 batteryId: &#39;&#39;, batteryVoltage: &#39;&#39;, batteryCurrent: &#39;&#39;, batterySoc: &#39;&#39;, batteryHardVersion: &#39;&#39;, batterySoftVersion: &#39;&#39;, batteryWorkMode: &#39;&#39;, batteryProtectCode: &#39;&#39;, batteryErrorCode: &#39;&#39;, batteryTemperatureMax: &#39;&#39;, batteryTemperatureMin: &#39;&#39;, batteryVoltageMax: &#39;&#39;, batteryVoltageMin: &#39;&#39;, mosStatus: &#39;&#39;, mosTemp: &#39;&#39;, batteryCycleTimes: &#39;&#39;, steadyStatus: &#39;&#39;, cellVoltage: &#39;&#39;, model: &#39;&#39;, manufacture: &#39;&#39;, imei: &#39;&#39;, imsi: &#39;&#39;, iccid: &#39;&#39;, trackerHardwareVersion: &#39;&#39;, trackerSoftwareVersion: &#39;&#39;, reportreason: &#39;&#39;, detstatus: &#39;&#39;, csq: &#39;&#39;, networkType: &#39;&#39;, locationMode: &#39;&#39;, longitude: &#39;&#39;, longitudeDirection: &#39;&#39;, latitude: &#39;&#39;, latitudeDirection: &#39;&#39;, gpsSpeed: &#39;&#39;, gpsSignal: &#39;&#39;, satelliteNum: &#39;&#39;, accuracy: &#39;&#39;, businessmode: &#39;&#39;, flag: &#39;&#39;, uploadTime: &#39;&#39;, createTime: &#39;&#39;, updateTime: &#39;&#39; }, dataRule: { batteryId: [ { required: true, message: &#39;请输入电池ID&#39;, trigger: &#39;blur&#39; } ], batteryKind: [ { required: true, message: &#39;请选择电池类型&#39;, trigger: &#39;change&#39; } ], batteryVoltage: [ { required: true, message: &#39;请输入电池电压&#39;, trigger: &#39;blur&#39; }, { type: &#39;number&#39;, message: &#39;必须为数字值&#39; } ], batteryCurrent: [ { required: true, message: &#39;请输入电池电流&#39;, trigger: &#39;blur&#39; }, { type: &#39;number&#39;, message: &#39;必须为数字值&#39; } ], batterySoc: [ { required: true, message: &#39;请输入电池SOC&#39;, trigger: &#39;blur&#39; }, { type: &#39;number&#39;, message: &#39;必须为数字值&#39;, min: 0, max: 100 } ], batteryWorkMode: [ { required: true, message: &#39;请选择工作模式&#39;, trigger: &#39;change&#39; } ], batteryProtectCode: [ { required: true, validator: validateBinary16, trigger: &#39;blur&#39; } ], batteryErrorCode: [ { required: true, validator: validateBinary16, trigger: &#39;blur&#39; } ], batteryTemperatureMax: [ { required: true, message: &#39;请输入最高温度&#39;, trigger: &#39;blur&#39; }, { type: &#39;number&#39;, message: &#39;必须为数字值&#39;, min: -50, max: 100 } ], batteryTemperatureMin: [ { required: true, message: &#39;请输入最低温度&#39;, trigger: &#39;blur&#39; }, { type: &#39;number&#39;, message: &#39;必须为数字值&#39;, min: -50, max: 100 } ], batteryVoltageMax: [ { required: true, message: &#39;请输入最高电压&#39;, trigger: &#39;blur&#39; }, { type: &#39;number&#39;, message: &#39;必须为数字值&#39;, min: 0 } ], batteryVoltageMin: [ { required: true, message: &#39;请输入最低电压&#39;, trigger: &#39;blur&#39; }, { type: &#39;number&#39;, message: &#39;必须为数字值&#39;, min: 0 } ], mosStatus: [ { required: true, message: &#39;请输入MOS状态&#39;, trigger: &#39;blur&#39; } ], mosTemp: [ { required: true, message: &#39;请输入MOS温度&#39;, trigger: &#39;blur&#39; }, { type: &#39;number&#39;, message: &#39;必须为数字值&#39;, min: -50, max: 150 } ], batteryCycleTimes: [ { required: true, message: &#39;请输入循环次数&#39;, trigger: &#39;blur&#39; }, { type: &#39;number&#39;, message: &#39;必须为数字值&#39;, min: 0 } ], steadyStatus: [ { required: true, message: &#39;请输入稳定状态&#39;, trigger: &#39;blur&#39; } ], cellVoltage: [ { required: true, message: &#39;请输入单体电压&#39;, trigger: &#39;blur&#39; }, { type: &#39;number&#39;, message: &#39;必须为数字值&#39;, min: 0 } ], model: [ { required: true, message: &#39;请输入设备型号&#39;, trigger: &#39;blur&#39; } ], manufacture: [ { required: true, message: &#39;请输入制造商&#39;, trigger: &#39;blur&#39; } ], imei: [ { required: true, message: &#39;请输入IMEI&#39;, trigger: &#39;blur&#39; } ], imsi: [ { required: true, message: &#39;请输入IMSI&#39;, trigger: &#39;blur&#39; } ], iccid: [ { required: true, message: &#39;请输入ICCID&#39;, trigger: &#39;blur&#39; } ], trackerHardwareVersion: [ { required: true, message: &#39;请输入硬件版本&#39;, trigger: &#39;blur&#39; } ], trackerSoftwareVersion: [ { required: true, message: &#39;请输入软件版本&#39;, trigger: &#39;blur&#39; } ], reportreason: [ { required: true, message: &#39;请输入上报原因&#39;, trigger: &#39;blur&#39; } ], detstatus: [ { required: true, message: &#39;请输入检测状态&#39;, trigger: &#39;blur&#39; } ], csq: [ { required: true, message: &#39;请输入信号强度&#39;, trigger: &#39;blur&#39; }, { type: &#39;number&#39;, message: &#39;必须为数字值&#39;, min: 0, max: 31 } ], networkType: [ { required: true, message: &#39;请输入网络类型&#39;, trigger: &#39;blur&#39; } ], locationMode: [ { required: true, message: &#39;请输入定位模式&#39;, trigger: &#39;blur&#39; } ], longitude: [ { required: true, message: &#39;请输入经度&#39;, trigger: &#39;blur&#39; }, { type: &#39;number&#39;, message: &#39;必须为数字值&#39;, min: -180, max: 180 } ], longitudeDirection: [ { required: true, message: &#39;请选择经度方向&#39;, trigger: &#39;change&#39; } ], latitude: [ { required: true, message: &#39;请输入纬度&#39;, trigger: &#39;blur&#39; }, { type: &#39;number&#39;, message: &#39;必须为数字值&#39;, min: -90, max: 90 } ], latitudeDirection: [ { required: true, message: &#39;请选择纬度方向&#39;, trigger: &#39;change&#39; } ], gpsSpeed: [ { required: true, message: &#39;请输入GPS速度&#39;, trigger: &#39;blur&#39; }, { type: &#39;number&#39;, message: &#39;必须为数字值&#39;, min: 0 } ], gpsSignal: [ { required: true, message: &#39;请输入GPS信号&#39;, trigger: &#39;blur&#39; }, { type: &#39;number&#39;, message: &#39;必须为数字值&#39;, min: 0 } ], satelliteNum: [ { required: true, message: &#39;请输入卫星数量&#39;, trigger: &#39;blur&#39; }, { type: &#39;number&#39;, message: &#39;必须为数字值&#39;, min: 0, max: 32 } ], accuracy: [ { required: true, message: &#39;请输入定位精度&#39;, trigger: &#39;blur&#39; }, { type: &#39;number&#39;, message: &#39;必须为数字值&#39;, min: 0 } ], businessmode: [ { required: true, message: &#39;请选择业务模式&#39;, trigger: &#39;change&#39; } ], flag: [ { required: true, message: &#39;请选择数据标志&#39;, trigger: &#39;change&#39; } ], uploadTime: [ { required: true, message: &#39;请选择上传时间&#39;, trigger: &#39;change&#39; } ], createTime: [ { required: true, message: &#39;请选择创建时间&#39;, trigger: &#39;change&#39; } ], updateTime: [ { required: true, message: &#39;请选择更新时间&#39;, trigger: &#39;change&#39; } ] } } }, methods: { init (id) { this.dataForm.id = id || 0 this.visible = true this.$nextTick(() => { this.$refs[&#39;dataForm&#39;].resetFields() if (this.dataForm.id) { this.$http({ url: this.$http.adornUrl(`/maya/mybatteryinfolastest/info/${this.dataForm.id}`), method: &#39;get&#39;, params: this.$http.adornParams() }).then(({data}) => { if (data && data.code === 0) { this.dataForm = { ...this.dataForm, ...data.myBatteryInfoLastest } } }) } }) }, // 重置表单 resetForm() { if (this.$refs[&#39;dataForm&#39;]) { this.$refs[&#39;dataForm&#39;].resetFields(); this.activeTab = &#39;basic&#39;; } }, // 表单提交 dataFormSubmit () { this.$refs[&#39;dataForm&#39;].validate((valid) => { if (valid) { this.$http({ url: this.$http.adornUrl(`/maya/mybatteryinfolastest/${!this.dataForm.id ? &#39;save&#39; : &#39;update&#39;}`), method: &#39;post&#39;, data: this.$http.adornData({ ...this.dataForm }) }).then(({data}) => { if (data && data.code === 0) { this.$message({ message: &#39;操作成功&#39;, type: &#39;success&#39;, duration: 1500, onClose: () => { this.visible = false this.$emit(&#39;refreshDataList&#39;) } }) } 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
根据引用[3]中提到的方法，我们可以使用v-if来控制显示隐藏，但这里需求是编辑状态的控制，所以更合适的方法是使用禁用状态（disabled）或只读状态（readonly）。 在Element UI/Element Plus中，我们可以通过给el-...
Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden. Element with focus: <li.el-menu-item> Ancestor with aria-hidden: <div.el-popper is-pure is-light el-zoom-in-left-leave-from el-zoom-in-left-leave-active#el-id-1886-15>
08-26
具体问题是el-menu-item的焦点问题与el-popper有关。 问题分析： 当某个祖先元素设置了`aria-hidden="true"`时，它会将该元素及其所有子元素从可访问性树中移除，因此辅助技术（如屏幕阅读器）将无法访问这些子...
不对，我的意思是只显示了标题，没内容
07-22
<el-tab-pane label="状态信息" name="2"> <div class="form-grid"> <el-form-item label="工作模式" prop="batteryWorkMode"> <el-select v-model="dataForm.batteryWorkMode" disabled> <el-option label=...
el-tab-pane的使用
懒虫的博客
11-09 6960
<el-tabs v-model="activeName" type="border-card"> <el-tab-pane label="工厂模式" name="first"> </el-tab-pane> <el-tab-pane label="月份模式" name="second"> </el-tab-pane> </el-tabs> <script> expor
解决vue中el-tab-pane切换的问题
10-15
主要介绍了解决vue中el-tab-pane切换的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE3+element plus在el-tab-pane中增加自定义图标
nopyramid的博客
11-25 3609
element plus在el-tab-pane中增加自定义图标
el-tab-pane点击事件
CRT本人的博客
04-11 1万+
<el-tab-pane标题的点击事件
Vue Element-ui中el-tabs，el-tab-pane切换改变字体颜色，自定义颜色等
weixin_41346436的博客
06-09 1万+
Element-ui中el-tabs，el-tab-pane切换改变字体颜色，以及自定义下方条状的颜色等 样式效果 代码结构 <template> <div class="main"> <el-tabs v-model="activeName" class="box"> <el-tab-pane label="视频" name="video"> <CourseVideo></CourseVideo&g
elementui动态生成el-tab-pane下动态校验tab下的from表单，公用一套校验规则并互不影响；循环生成的表单进行表单校验
Sunny_lxm的博客
05-31 2813
代码部分 <!---HTML部分----> <el-tabs v-model="editableTabsValue" type="card"> <el-tab-pane :key="index" v-for="(item, index) in editableTabs" :label="item.title" :name="String(index)"> <el-form :model=
el-table中的嵌套el-tab-pane嵌套el-table 设置dataRules解决记录
qq_42061351的博客
10-29 2549
嵌套关系如下： el-table |----el-tab-panel |--------el-table |------------el-table-column 按照网上给的方法，设置dataRules，发现不行。如果把prop改成planMap，dataRules中也设置相应的rule，能校验了，但是不管输入啥，都是报错，还有这个字段名就是name，不可能改后端返回的字段把。 这里采用手动加上校验的方法。 先写一个span，调一下样式 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存.
vue3进阶(三)——el-tabs标签页组件的使用& 设置sessionStorage.setItem()、获取sessionStorage.getItem()& router.push()跳转页面
weixin_44867717的博客
09-04 1824
【代码】vue3进阶(三)——el-tabs标签页组件的使用& 设置sessionStorage.setItem()、获取sessionStorage.getItem()& router.push()跳转页面。
element-plus组件库el-tab-pane中加入el-dropdown组件、设置el-dropdown-item选项高亮
个人博客
12-20 2665
使用插槽的方式，在el-tab-pane中加入el-dropdown组件。根据command值设置el-dropdown-item高亮。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值