我用循环做了一个标签页选项卡，同时也想用循环做个标签页
https://img-mid.csdnimg.cn/release/static/image/mid/ask/162075369636129.jpg?x-oss-process=image/auto-orient,1
现在，我要从每个选项卡下的左边表格中选到数据放到右边的表格中，
https://img-mid.csdnimg.cn/release/static/image/mid/ask/613936369636155.png?x-oss-process=image/auto-orient,1
左边的表格数据减少一条，注意所有的选项卡的左边表格数据共用，意思就是假如图中阶段1选了认可项1，所有阶段的左边都没有认可项1，除了阶段1的其他阶段的右边的表格没选之前为空，但是现在左右两边数据都是共用的，请求解决方法
下方是我写的一个这个功能的小demo：
<template>
<el-tabs type="border-card" @tab-click="handleClick">
<el-tab-pane
:label="item.classesName"
v-for="(item, index) in stages"
:key="index"
>
<div>
<el-card shadow="never">
<el-row :gutter="15">
<el-col :md="12">
<!-- 未选择的认可项表格 -->
<ele-pro-table
:datasource="itemes"
:columns="columns1"
sub-title="可选列:"
height="240px"
emptyText="已全部选择"
:toolkit="[]"
:needPage="false"
>
<template slot="toolkit">
<el-button size="mini" class="ele-btn-icon" @click="addAll1">
全部→
</el-button>
</template>
<template slot="action" slot-scope="{ row }">
<el-button size="mini" @click="add1(row)">→</el-button>
</template>
</ele-pro-table>
</el-col>
<el-col :md="12">
<!-- 已选择的认可项表格 -->
<!-- v-for="(items, index1) in item.id" :key="index1" -->
<ele-pro-table
:datasource="chooseItemes"
:columns="columns1"
sub-title="结果列:"
height="240px"
emptyText="未选择认可项"
:toolkit="[]"
:needPage="false"
>
<template slot="toolkit">
<el-button
size="mini"
type="danger"
plain
class="ele-btn-icon"
@click="removeAll1"
>
全部←
</el-button>
</template>
<template slot="action" slot-scope="scope">
<el-button
type="danger"
plain
size="mini"
@click="remove1(scope.row)"
>←</el-button
>
</template>
</ele-pro-table>
</el-col>
</el-row>
</el-card>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
stages: [
{ classesId: 1, classesName: '阶段1' },
{ classesId: 2, classesName: '阶段2' },
{ classesId: 3, classesName: '阶段3' },
{ classesId: 4, classesName: '阶段4' }
],
//全部认可项
itemes: [
{ classesId: 1, classesName: '认可项1', seletedName: '' },
{ classesId: 2, classesName: '认可项2', seletedName: '' },
{ classesId: 3, classesName: '认可项3', seletedName: '' },
{ classesId: 4, classesName: '认可项4', seletedName: '' },
{ classesId: 5, classesName: '认可项5', seletedName: '' },
{ classesId: 6, classesName: '认可项6', seletedName: '' }
],
// 已选择的认可阶段
chooseStages: [],
// 已选择的认可项
chooseItemes: [],
//定义一个子源数据
// chooseSourceData: [],
// 表格列配置
columns1: [
{
prop: 'classesName',
label: '名称',
showOverflowTooltip: true,
minWidth: 180
},
{
columnKey: 'action',
label: '操作',
width: 120,
align: 'center',
slot: 'action'
}
]
};
},
computed: {
/* 未选择的认可阶段数据 */
unStage() {
// filter()返回的是满足条件的额数组
return this.stages.filter((d) => this.chooseStages.indexOf(d) === -1);
}
/* 未选择的认可项数据 */
// unApproved() {
// return this.itemes.filter((d) => this.chooseItemes.indexOf(d) === -1);
// }
},
mounted() {
this.chooseItemes = [];
this.query();
},
methods: {
query() {
console.log('aa');
console.log(this.chooseItemes);
// console.log(this.itemes);
this.itemes.forEach((item) => {
item.seletedName = this.stages[0].classesName;
});
// ???????????????????????????????????????????????????????????
for(let i = 0; i < this.stages.length; i++){
console.log(this.stages[i])
for(let j = 0; j < this.itemes.length; j++){
console.log(this.itemes[j])
for(let k = 0; k < this.chooseItemes.length; k++){
console.log(this.chooseItemes[k])
}
}
}
// ???????????????????????????????????????????????????????????
},
handleClick(tab) {
console.log(tab.index);
//选中哪个阶段
let chooseData;
chooseData = this.stages[tab.index]; //选择的阶段
let aa = 'arr' + tab.index;
console.log(aa);
console.log(chooseData); //选择的阶段
this.itemes.forEach((item) => {
item.seletedName = chooseData.classesName;
});
},
//数据排序
classesId(a, b) {
return a.classesId - b.classesId;
},
/* 认可项添加 */
add1(row) {
// this.chooseSourceData.push(row);
removeAaary(this.itemes, row); //左边源数组数据删除数据
this.chooseItemes.push(row); //右边添加数据
this.chooseItemes.sort(this.classesId); //右边数据排序
console.log('左边共用的总数据');
console.log(this.itemes);
console.log('右边被选中的数据');
console.log(this.chooseItemes);
},
/* 认可项移除 */
remove1(row) {
this.chooseItemes.splice(this.chooseItemes.indexOf(row), 1); //右边移除数据
this.itemes.push(row); //左边源数组数据添加删除的数据
this.itemes.sort(this.classesId); //数据删除之后对整个数组数据进行排序
},
/* 认可项添加全部 */
addAll1() {
this.itemes.forEach((d) => {
this.chooseItemes.push(d);
// removeAaary(this.itemes, d);
});
},
/* 认可项移除所有 */
removeAll1() {
this.chooseItemes.splice(0, this.chooseItemes.length);
}
}
};
//数组删除某个对象的方法
/*删除数组中的某一个对象，_arr:数组，_obj:需删除的对象*/
function removeAaary(_arr, _obj) {
var length = _arr.length;
for (var i = 0; i < length; i++) {
if (_arr[i] == _obj) {
if (i == 0) {
_arr.shift(); //删除并返回数组的第一个元素
return _arr;
} else if (i == length - 1) {
_arr.pop(); //删除并返回数组的最后一个元素
return _arr;
} else {
_arr.splice(i, 1); //删除下标为i的元素
return _arr;
}
}
}
}
</script>
求解决方法
