el-tab-pane遇到的问题记录闲谈

2023-10-06 23:10

本文主要是介绍el-tab-pane遇到的问题记录闲谈,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.缓存本地不生效原因是判断出了问题

事情是这样,在项目中el-tab-pane切换,切换的页面有一个复选框,勾选当前页,其它页的复选框取消,
我当时就想到了本地缓存,于是就写了下面的代码

    <el-tabs v-model="oneName"type="border-card"class="tabs_box"@tab-click="tabsClick">

很正常的一个切换,在这个操作中进行了数据的获取,保存了本地

 if (tab.name !== JSON.parse(localStorage.getItem('checkStatus_inputs')) || tab.name !== JSON.parse(localStorage.getItem('checkStatus_outPuts'))) {this.formInline.checked = false} else if (tab.name === JSON.parse(localStorage.getItem('checkStatus_inputs')) || tab.name === JSON.parse(localStorage.getItem('checkStatus_outPuts'))) {console.log(tab.name === JSON.parse(localStorage.getItem('checkStatus_outPuts')))this.formInline.checked = true}

乍一看没问题,但是,但是啊,这个东西它不生效,我一开始以为是我没执行,结果打印了是执行的,
我就很纳闷,这为什么就是不缓存,结果是判断出了问题,于是我就换了判断

 if (tab.name === JSON.parse(localStorage.getItem('checkStatus_inputs')) || tab.name === JSON.parse(localStorage.getItem('checkStatus_outPuts'))) {this.formInline.checked = true} else {this.formInline.checked = false}

这样就可以缓存到本地了,可能我上面的判断填了了 || 或,导致都走了false,
在这里获得的经验是:判断的时候要看清楚 || 条件判断,这里的两个比较值是不同的el-tab-pane获取的,一个是inputs一个是outPuts两个切换, 不能用或来让勾选按钮取消,==`` 真的是没注意到,
但是还是不理解为什么执行了但是没有缓存,能解惑的吗

2.循环报错,提示有重复的keys值

这个原因也是在使用el-tab-pane遇到的,报错的提示是keys重复,我用vue插件看了keys值没有重复

  <el-tab-pane v-for="(item, index) in treeName":label="item.pdo_index":name="item.axis_index_id + ''">

这边看到了是 'tab-undefined’我猜测可能是拼接的内容,我就找哪里拼接了
```
最后看到
在这里插入图片描述
我添加这个引号是因为axis_index_id是一个数字类型,就是因为这个引号,导致了循环报错
解决办法:把引号去除

本文只用于自己记录复盘,内容太过弱智,希望大佬多多指点

不怕遇到问题,遇到并解决就是最好的成长,愿大家开心快乐每一天,笑口常开,好彩自然来

这篇关于el-tab-pane遇到的问题记录闲谈的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/154488

相关文章

redis在spring boot中异常退出的问题解决方案

《redis在springboot中异常退出的问题解决方案》:本文主要介绍redis在springboot中异常退出的问题解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴... 目录问题:解决 问题根源️ 解决方案1. 异步处理 + 提前ACK(关键步骤)2. 调整Redis消费者组

Ubuntu上手动安装Go环境并解决“可执行文件格式错误”问题

《Ubuntu上手动安装Go环境并解决“可执行文件格式错误”问题》:本文主要介绍Ubuntu上手动安装Go环境并解决“可执行文件格式错误”问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未... 目录一、前言二、系统架构检测三、卸载旧版 Go四、下载并安装正确版本五、配置环境变量六、验证安装七、常见

使用nohup和--remove-source-files在后台运行rsync并记录日志方式

《使用nohup和--remove-source-files在后台运行rsync并记录日志方式》:本文主要介绍使用nohup和--remove-source-files在后台运行rsync并记录日... 目录一、什么是 --remove-source-files?二、示例命令三、命令详解1. nohup2.

解决Java异常报错:java.nio.channels.UnresolvedAddressException问题

《解决Java异常报错:java.nio.channels.UnresolvedAddressException问题》:本文主要介绍解决Java异常报错:java.nio.channels.Unr... 目录异常含义可能出现的场景1. 错误的 IP 地址格式2. DNS 解析失败3. 未初始化的地址对象解决

springboot+vue项目怎么解决跨域问题详解

《springboot+vue项目怎么解决跨域问题详解》:本文主要介绍springboot+vue项目怎么解决跨域问题的相关资料,包括前端代理、后端全局配置CORS、注解配置和Nginx反向代理,... 目录1. 前端代理(开发环境推荐)2. 后端全局配置 CORS(生产环境推荐)3. 后端注解配置(按接口

使用雪花算法产生id导致前端精度缺失问题解决方案

《使用雪花算法产生id导致前端精度缺失问题解决方案》雪花算法由Twitter提出,设计目的是生成唯一的、递增的ID,下面:本文主要介绍使用雪花算法产生id导致前端精度缺失问题的解决方案,文中通过代... 目录一、问题根源二、解决方案1. 全局配置Jackson序列化规则2. 实体类必须使用Long封装类3.

Idea插件MybatisX失效的问题解决

《Idea插件MybatisX失效的问题解决》:本文主要介绍Idea插件MybatisX失效的问题解决,详细的介绍了4种问题的解决方法,具有一定的参考价值,感兴趣的可以了解一下... 目录一、重启idea或者卸载重装MyBATis插件(无需多言)二、检查.XML文件与.Java(该文件后缀Idea可能会隐藏

Nginx 访问 /root/下 403 Forbidden问题解决

《Nginx访问/root/下403Forbidden问题解决》在使用Nginx作为Web服务器时,可能会遇到403Forbidden错误,文中通过示例代码介绍的非常详细,对大家的学习或者工作... 目录解决 Nginx 访问 /root/test/1.html 403 Forbidden 问题问题复现Ng

Python的pip在命令行无法使用问题的解决方法

《Python的pip在命令行无法使用问题的解决方法》PIP是通用的Python包管理工具,提供了对Python包的查找、下载、安装、卸载、更新等功能,安装诸如Pygame、Pymysql等Pyt... 目录前言一. pip是什么?二. 为什么无法使用?1. 当我们在命令行输入指令并回车时,一般主要是出现以

Nginx部署React项目时重定向循环问题的解决方案

《Nginx部署React项目时重定向循环问题的解决方案》Nginx在处理React项目请求时出现重定向循环,通常是由于`try_files`配置错误或`root`路径配置不当导致的,本文给大家详细介... 目录问题原因1. try_files 配置错误2. root 路径错误解决方法1. 检查 try_f