关于#table#的问题,如何解决?

请问有多个el-table图表的情况下,A表点击或勾选一行,B表展示相应的数据。应该怎么操作?

img


左边是A表,右边是B表

这个实际上是 数据 的处理 。 首先 el-table 需要获取到 勾选的数据(selection-change 应该可以获取到) 。然后 直接复制给B表格的data数据 。

img


你在勾选的时候不是会触发一个点击事件嘛,你拿它的id或者什么去调用获取B表内数据的方法不就行了

左边的表的数据数组里每个元素可以定义索引,从0开始,和右边的表的默认索引对应;
1、左边的表可以通过el-table @select方法leftSelect(selection)的第一个参数获取选中的某N行,然后遍历选中的N行,获取N个id,放到一个数组中;
2、右侧勾选全部取消:this.$refs.右侧ref.clearSelection();
3、然后在table的toggleSelection方法中(这个方法的参数是N个id数组),遍历数组参数,this.$refs.右侧ref.toggleRowSelection(id);

总体思路:根据左侧选中的id数组,然后清除右侧上一次的勾选,最后根据id数组重新勾选右侧表