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

相关文章

springboot3.4和mybatis plus的版本问题的解决

《springboot3.4和mybatisplus的版本问题的解决》本文主要介绍了springboot3.4和mybatisplus的版本问题的解决,主要由于SpringBoot3.4与MyBat... 报错1:spring-boot-starter/3.4.0/spring-boot-starter-

Spring Retry 实现乐观锁重试实践记录

《SpringRetry实现乐观锁重试实践记录》本文介绍了在秒杀商品SKU表中使用乐观锁和MybatisPlus配置乐观锁的方法,并分析了测试环境和生产环境的隔离级别对乐观锁的影响,通过简单验证,... 目录一、场景分析 二、简单验证 2.1、可重复读 2.2、读已提交 三、最佳实践 3.1、配置重试模板

在 Spring Boot 中使用异步线程时的 HttpServletRequest 复用问题记录

《在SpringBoot中使用异步线程时的HttpServletRequest复用问题记录》文章讨论了在SpringBoot中使用异步线程时,由于HttpServletRequest复用导致... 目录一、问题描述:异步线程操作导致请求复用时 Cookie 解析失败1. 场景背景2. 问题根源二、问题详细分

解读为什么@Autowired在属性上被警告,在setter方法上不被警告问题

《解读为什么@Autowired在属性上被警告,在setter方法上不被警告问题》在Spring开发中,@Autowired注解常用于实现依赖注入,它可以应用于类的属性、构造器或setter方法上,然... 目录1. 为什么 @Autowired 在属性上被警告?1.1 隐式依赖注入1.2 IDE 的警告:

解决java.lang.NullPointerException问题(空指针异常)

《解决java.lang.NullPointerException问题(空指针异常)》本文详细介绍了Java中的NullPointerException异常及其常见原因,包括对象引用为null、数组元... 目录Java.lang.NullPointerException(空指针异常)NullPointer

Android开发中gradle下载缓慢的问题级解决方法

《Android开发中gradle下载缓慢的问题级解决方法》本文介绍了解决Android开发中Gradle下载缓慢问题的几种方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、网络环境优化二、Gradle版本与配置优化三、其他优化措施针对android开发中Gradle下载缓慢的问

关于Nginx跨域问题及解决方案(CORS)

《关于Nginx跨域问题及解决方案(CORS)》文章主要介绍了跨域资源共享(CORS)机制及其在现代Web开发中的重要性,通过Nginx,可以简单地解决跨域问题,适合新手学习和应用,文章详细讲解了CO... 目录一、概述二、什么是 CORS?三、常见的跨域场景四、Nginx 如何解决 CORS 问题?五、基

MySQL安装时initializing database失败的问题解决

《MySQL安装时initializingdatabase失败的问题解决》本文主要介绍了MySQL安装时initializingdatabase失败的问题解决,文中通过图文介绍的非常详细,对大家的学... 目录问题页面:解决方法:问题页面:解决方法:1.勾选红框中的选项:2.将下图红框中全部改为英

Nginx启动失败:端口80被占用问题的解决方案

《Nginx启动失败:端口80被占用问题的解决方案》在Linux服务器上部署Nginx时,可能会遇到Nginx启动失败的情况,尤其是错误提示bind()to0.0.0.0:80failed,这种问题通... 目录引言问题描述问题分析解决方案1. 检查占用端口 80 的进程使用 netstat 命令使用 ss

mybatis和mybatis-plus设置值为null不起作用问题及解决

《mybatis和mybatis-plus设置值为null不起作用问题及解决》Mybatis-Plus的FieldStrategy主要用于控制新增、更新和查询时对空值的处理策略,通过配置不同的策略类型... 目录MyBATis-plusFieldStrategy作用FieldStrategy类型每种策略的作