0
点赞
收藏
分享

微信扫一扫

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

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

用的是element ui的radio和table组成的,上面是标签下面是标签下的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;
    }
  }
}


举报

相关推荐

0 条评论