问题:实际业务中有一个多Tab的多表格数据UI界面,即:在每一个Tab下去渲染多个Table的数据,而且这些表格是离散的,即:@selection-change事件只能获取当前表格的选中项,而我们的业务是要求获取多个离散的选中项
之前已经有一篇 ‘JS多表格离散选中项处理’的博客,而此篇是解决多Tab下的多表格选中项处理,与上一篇大同小异,只是多了Tab的Dom遍历处理
<div class="table-area" v-for="(cartItem, cardId) in cartList" :key="cardId">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="服饰区" name="first">
<el-table :data="cartItem.itemDetails" style="width: 100%"
@selection-change="(val)=>handleSelectionChange('服饰', 1)"
:ref="`multiTable-${cartItem.cartId}`">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="time" label="时间"></el-table-column>
<el-table-column prop="price" label="价格"></el-table-column>
<el-table-column prop="counts" label="数量"></el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="生活区" name="second">
<el-table :data="cartItem.itemDetails" style="width: 100%"
@selection-change="(val)=>handleSelectionChange('生活区', 2)"
:ref="`multiTable-${cartItem.cartId}`">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="time" label="时间"></el-table-column>
<el-table-column prop="price" label="价格"></el-table-column>
<el-table-column prop="counts" label="数量"></el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="工作区" name="third">
<el-table :data="cartItem.itemDetails" style="width: 100%"
@selection-change="(val)=>handleSelectionChange('工作区', 3)"
:ref="`multiTable-${cartItem.cartId}`">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="time" label="时间"></el-table-column>
<el-table-column prop="price" label="价格"></el-table-column>
<el-table-column prop="counts" label="数量"></el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</div>
// 处理选中id
handleSelectionChange(tab, num) {
let selectedIdList = []
for (let item of this.cartList) {
switch (tab) {
case '服饰区':
// 在循环中this.$refs['multiTable']获取的Dom组件的数组length是 3,
// 分别对应三个页签,所以这里的num就作为Dom数组的index,获取对应的selections
// 而这里有三个Tab,所以有3个Dom组件,需要添加判断,一一对应
// 获取第1个Tab的selections,所以num取传递过来的 0
this.selectedTableList = this.$refs[`multiTable-${item.cartId}`][num].selection
break
case '生活区':
// 获取第2个Tab的selections,所以num取传递过来的 1
this.selectedTableList = this.$refs[`multiTable-${item.cartId}`][num].selection
break
case '工作区':
// // 获取第3个Tab的selections,所以num取传递过来的 2
this.selectedTableList = this.$refs[`multiTable-${item.cartId}`][num].selection
break
}
for (let option of this.selectedTableList) {
// for (let list of option.list) {
selectedIdList.push(option.cartId)
// }
}
}
this.selectedIdArr = selectedIdList.join(',') // 获取选中的id数组,以逗号隔离 1001, 2002, 3003
// 然后这个this.selectedIdArr就可以作为参数传递给接口了
}