首页 > 其他分享 >使用方括号方法取动态对象名

使用方括号方法取动态对象名

时间:2023-09-09 22:02:26浏览次数:42  
标签:方括号 对象 tab2 tab1 list label radio 动态 data

前两天工作中需要这个需求,切换的时候选中的数据列表是动态变化的,就用[]方括号法取当前选中值的对象

用的是element ui的radiotable组成的,上面是标签下面是标签下的table

使用方括号方法取动态对象名_方括号

因为el-radio的样式和界面有一点出入修改样式也麻烦,自己组合写了一个,效果图类似下面这种

使用方括号方法取动态对象名_动态_02


<el-radio-group v-model="active" @change="handleChange>
	<el-radio-button v-for="(item,index) in tabList" :key="index">{{item.label === "tab1" ? '标签1' : item.label === 'tab2' ? '标签2' : '标签3'}}</radio-button>
</el-radio-grou>
 <el-table
      :data="active.list"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>

data() {
	return {
  	tab1: {current: 1,size: 10,list: []}
  	tab2: {current: 1,size: 10,list: []},
    tab3: {current: 1,size: 10,list: []},
  	active: "tab1",
    tabList: [{label: 'tab1'},{label: 'tab2'},{label: 'tab2'}],
  }
}

mothods: {
	change(e) {
  	this.radio = e;
    this[this.radio].current = 1;
    this[this.radio].size = 10;
    this.getData();
  },
  getData() {
  	//api请求
    if(res.data.code===0) {
    	let data = res.data.data;
    	this.tab1.list = data.list1;
      this.tab2.list = data.list2;
      this.tab3.list = data.list3;
    }
  }
}


标签:方括号,对象,tab2,tab1,list,label,radio,动态,data
From: https://blog.51cto.com/u_15694202/7421126

相关文章

  • Spartacus 如何动态将 SmartEdit attribute 添加到 DOM 里,单步调试
    从Spartacus发起的basesiteocc请求的response获取当前site的数据:从CMSpage的response结果里得到的properties:使用renderer往DOM元素上添加attribute:在这个DynamicAttributeService里设置断点。Angular是一种流行的前端框架,它提供了一套强大的工具......
  • 如何找到 Spartacus 动态加载 library 的准确实现地址
    Spartacus里SmartEditFeatureModule这段实现代码:import{NgModule}from'@angular/core';import{CmsConfig,provideConfig}from'@spartacus/core';import{SmartEditRootModule,SMART_EDIT_FEATURE,}from'@spartacus/smartedit/ro......
  • 四、若依获取动态路由
    1、获取动态路由2、全局路由守卫2.1)用户在登录后,会发出3个请求,分别是login,getinfo,getRouters。分别代表了请求登录,获取用户角色和权限,获取动态路由。getinfo,getRouters是配置在路由守卫中的。3、前端3.1)在router在index.js文件中,默认已经读取了公共(静态)路由数据,系统确实......
  • cmake基础示例:如何编译【跨平台】的动态库和应用程序
    示例代码首先看一下测试代码的全貌:mylib:只有一个源文件,编译输出一个动态库;myapp:也只有一个源文件,链接mylib动态库,编译输出一个可执行程序; mylib在mylib目录中,一共有3个文件:mylib.h,mylib.c以及CMakeLists.txt,内容分别如下://mylib/mylib.hw文件#ifndef_M......
  • js json用法 转json字符串 json对象( 重点看最后)
    jsjson:JSON.parse() //转为json对象。JSON.stringify() //转为JSON字符串。举例:<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jsjson举例</title></head><body><pid="demo"></p&g......
  • C++-类和对象(2)
    今天,我们继续学习类和对象的相关知识,本次学习的内容,主要是this指针和默认构造函数。继上篇文章结尾,我们讲到了,一个类实例化出对象后,它的成员变量和成员函数是如何存储的。类实例化出的对象,会给成员变量开辟空间,而成员函数则放在公共代码段区(这个类共有的空间),不会单独开辟空间。对于......
  • 动态语义分析
          ......
  • 高频功放动态特性
    其理想化特性曲线的原理是,在放大区,集电极电流和基极电流不受集电极电压影响,而仅与基极电压呈线性关系;在饱和区,集电极电流与集电极电压呈线性关系,而不受基极电压的影响。工作状态负载特性Vcc输入电压总结......
  • 动态规划[买卖股票的最佳时机一系列]
    目的是最大化一个利润的值,前提:买必涨,只是考虑赚多少。之前的cost是今天的price收益一次=卖的价格减去买的价格=price-cost。ifprofit<0then0,无滞后性,每次卖股票都是站在当前这天的角度,但是可以看到后面几天股票的价格,所以如果不见涨,则不会买。总收益=很多次收益......
  • JavaScript-Number对象
    概述Number对象是数值对应的包装对象,可以作为构造函数使用,也可以作为工具函数使用。作为构造函数时,它用于生成值为数值的对象。varn=newNumber(1);typeofn//"object"上面代码中,Number对象作为构造函数使用,返回一个值为1的对象。作为工具函数时,它可以将任何类型的值转为数值......