前两天工作中需要这个需求,切换的时候选中的数据列表是动态变化的,就用[]方括号法取当前选中值的对象
用的是element ui的radio和table组成的,上面是标签下面是标签下的table
因为el-radio的样式和界面有一点出入修改样式也麻烦,自己组合写了一个,效果图类似下面这种
<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;
}
}
}