(vue)el-tabs选中最后一项后更新数据后无法展开

news2024/11/23 19:38:55

(vue)el-tabs选中最后一项后更新数据后无法展开


效果:
在这里插入图片描述


原因:选中时绑定的值在数据更新后找不到

思路:更新数据时把选中的v-model的属性赋为初始值


写法:

<el-form-item label="字段选择">
  <el-tabs
    v-model="activeNameField" //选中的tab
    type="border-card"
    @tab-click="handleClickField"//点击的选项信息
  >
    <el-tab-pane
      v-for="(ae, ai) in Object.keys(ziduanObj)"
      :key="ai"
      :label="ae"
      :name="String(ai)" //name赋的是索引下标
    >
      ...
    </el-tab-pane>
  </el-tabs>
</el-form-item>

js:

<script>
export default {
	data(){
		return {
			activeNameField: '0'
		}
	},
	
	methods:{	
	    // 字段tab
	    handleClickField(tab, event) {
	      console.log(tab) 
	      console.log(this.activeNameField)
	    },
	    // 下拉框改变事件
	    selectChange() {
	      this.activeNameField = '0' //恢复初始默认的第一个选项
		}
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1885354.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【计算机网络】传输层(作业)

1、OSI参考模型中&#xff0c;提供端到端的透明数据传输服务、差错控制和流量控制的层是&#xff08;C&#xff09;。 A. 物理层B. 网络层C. 运输层D. 会话层 2、运输层为&#xff08;B&#xff09;之间提供逻辑通信。 A. 主机B. 进程C. 路由器D. 操作系统 3、运输层面向连接…

【面试系列】技术支持工程师高频面试题及详细解答

欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;欢迎订阅相关专栏&#xff1a; ⭐️ 全网最全IT互联网公司面试宝典&#xff1a;收集整理全网各大IT互联网公司技术、项目、HR面试真题. ⭐️ AIGC时代的创新与未来&#xff1a;详细讲解AIGC的概念、核心技术、…

JavaScript实现时钟计时

会动的时钟 1.目标 2.分析 1.最开始页面不显示时间&#xff0c;有两个按钮 开始 暂停。开始按钮是可以点击的&#xff0c;暂停按钮不能点击 2.当点击开始按钮后&#xff0c;设置开始按钮不可用&#xff0c;暂停按钮可用。然后将当前系统时间放到按钮上面。每隔1秒中更新一下…

国产操作系统麒麟v10、UOS在线打开excel文件并动态赋值

在实际的开发过程中&#xff0c;经常会遇到数据库中的数据填充到excel生成一份正式文件的功能&#xff0c;PageOffice客户端控件支持在线预览Excel文件时&#xff0c;通过Workbook对象来实现对Excel文件的数据填充功能&#xff0c;如果只是简单的填充一下数据&#xff0c;那么通…

通过容器启动QAnything知识库问答系统

QAnything (Question and Answer based on Anything) 是致力于支持任意格式文件或数据库的本地知识库问答系统&#xff0c;可断网安装使用。目前已支持格式&#xff1a;PDF(pdf)&#xff0c;Word(docx)&#xff0c;PPT(pptx)&#xff0c;XLS(xlsx)&#xff0c;Markdown(md)&…

洛必达法则在Android应用程序中的应用

洛必达法则在Android应用程序中的应用 前言 在高等数学中,洛必达法则(L’Hpital’s Rule)是一个用于计算未定式极限的有力工具。洛必达法则为我们提供了一种简便的方法,通过求导数来处理一些复杂的极限问题。在Android开发中,尽管我们通常不会直接遇到需要应用洛必达法则…

第二届重庆国际渔业博览会

The 2th Chongqing International Fisheries & Seafood Expo 时间&#xff1a;2024年10月25-27日 地点&#xff1a;重庆国际博览中心 同期举办&#xff1a;第十六届中国(重庆)火锅美食文化节暨第九届中国(重庆)国际火锅产业博览会 展会规模&#xff1a; 展出…

【C++知识点总结全系列 (06)】:STL六大组件详细介绍与总结(配置器、容器、迭代器、适配器、算法、仿函数)

STL六大组件目录 前言1、配置器(1)What(2)Why(3)HowA.调用new和delete实现内存分配与销毁B.STL Allocator (4)allocator类A.WhatB.HowC.allocator的算法 2、容器(1)What(2)Which&#xff08;有哪些容器&#xff09;(3)序列容器&#xff08;顺序容器&#xff09;A.WhichB.array&…

Unreal Engine@Jetson Orin Nano尚不支持

Unreal EngineJetson Orin Nano尚不支持 1. 源由2. Unreal Engine介绍3. 问题4. 编译方法5. 补充 1. 源由 最近在看SC-Explorer方面的内容&#xff0c;在模拟方面采用了Unreal Engine。 本打算跑下模拟&#xff0c;因此打算在JetsonOrin的板子上试试看。 2. Unreal Engine介绍…

【Python】已解决:urllib.error.HTTPError: HTTP Error 403: Forbidden

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决&#xff1a;urllib.error.HTTPError: HTTP Error 403: Forbidden 一、分析问题背景 在使用Python的urllib库中的urlopen或urlretrieve函数下载文件时&#xff0c;有时会遇到…

SAP 物料状态简介

在物料主数据中有个物料状态的栏位&#xff0c;这个栏位的作用就在于对涉及到相应物料主数据的各种事务进行不同形式的限制&#xff0c;从而达到对物料的用途进行管控的作用。在实际业务中&#xff0c;尤其是涉及到物料的生命周期管理时&#xff0c;当某个物料已经被禁用的时候…

报表-显示图片(logo、签名、签章等)

1、数据源 字段里面存图片url或base64 比如&#xff1a;https://img2.baidu.com/it/u99450198,2193994199&fm253 as img1 或data:image/png;base64&#xff0c;因为base64体积大&#xff0c;适用于图片尺寸小&#xff0c;并且数量小的情况 2、报表设计 使用ShowImage方…

【创建者模式-建造者模式】

概要 将一个复杂对象的构建与表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 建造者模式包含以下角色 抽象建造者类&#xff08;Builder&#xff09;&#xff1a;这个接口规定要实现复杂对象的那些部分的创建&#xff0c;并不涉及具体的部件对象的创建。具体建…

C++获取数组长度以及数组的函数传参获取数组长度

1、C获取数组长度----sizeof(array)/sizeof(array[0]) 定义一个数组&#xff0c;int arr[]{1,2,3,4,5,6,7,8,9}; sizeof&#xff08;&#xff09;方法用于统计变量的内存大小&#xff0c;sizeof&#xff08;arr&#xff09;用于获取数组arr占用的内存大小 sizeof&#xff08…

罗德和神牛、西圣无线麦克风哪个好用?罗德、西圣多方位实测对比

随着短视频行业的兴起&#xff0c;越来越多人开始加入自媒体创作的行业中&#xff0c;不过对于短视频而言&#xff0c;光有好的画面是不够的&#xff0c;还需要清晰、干净的声音。而无线领夹麦适用于唱歌、直播、吃播、短视频、访谈等场景使用&#xff0c;而且能够极大的提高声…

交通气象站:保障道路畅通的守护者

随着现代社会的飞速发展&#xff0c;交通网络日益密集&#xff0c;人们的出行越来越依赖于公路、铁路和航空等交通方式。然而&#xff0c;多变的天气条件常常给交通安全带来隐患&#xff0c;如大雾、雨雪、强风等恶劣天气不仅影响行车视线&#xff0c;还可能造成路面湿滑、结冰…

计算机硬件(考点篇)试题

波特率&#xff1a; 在电子通信领域&#xff0c;波特&#xff08;Baud&#xff09;即调制速率&#xff0c;指的是有效数据讯号调制载波的速率&#xff0c;即单位时间内载波调制状态变化的次数。波特&#xff08;Baud&#xff0c;单位符号&#xff1a;Bd&#xff09;。 波特率…

78.Vue 3 重用性模态框组件

模态框是大多数 Web 应用程序中的基本构建块。虽然最初实现起来可能看起来有点棘手&#xff0c;但实际上&#xff0c;使用 Vue 和一些 Flexbox 技巧&#xff0c;这不仅可行&#xff0c;而且非常简单。 让我们一起实现一个基础的模态框组件。 架构如下&#xff1a; AppModal.vue…

【OceanBase】OBProxy 无状态的理解

SueWakeup 个人主页&#xff1a;SueWakeup 系列专栏&#xff1a;为祖国的科技进步添砖Java 个性签名&#xff1a;保留赤子之心也许是种幸运吧 本文封面由 凯楠&#x1f4f8;友情提供 目录 前言 OBProxy 无状态的概述 OBProxy 无状态特性带来的优点 1. 高可用 2. 负载均衡…

当Matplotlib遇见SciencePlots

分享一个Matplotlib扩展工具SciencePlots&#xff0c;一行代码绘制science、nature、ieee等要求的图形。 安装 安装SciencePlots # 直接从PyPI安装 pip install SciencePlots 安装latex 如果latex未安装&#xff0c;会报错&#xff1a;RuntimeError: Failed to process st…