[element-ui] - table 使用 toggleRowSelection(row) 默认选中状态的注意事项

724 阅读1分钟

需求:一组表单数据的某个字段,要从给出的列表中选择想要的数据。在编辑时,列表回显要处理已选的数据(打上对勾)。

过程很简单,只需要调用element-ui 中的 this.$refs.multipleTable.toggleRowSelection(row) 方法就可以。

这里接口返回的数据格式并不是想要的,所以需要先处理以便数据。那么问题就出来了。

这里是新声明了一个数组,存下所有已选的数据,然后在调用方法去进行列表选中处理,问题就出现在了这里。

在element-ui 中,想要处理列表的选中状态,需要传进去一组参数,也就是

this.$refs.multipleTable.toggleRowSelection(row)里面的这个row。

经过多次试错,我发现这个参数只能是来自于这个列表本身,不能来自于另一个数组。即使可以判断出目标行的数据是完全相等,也不能达到想要的效果,只会产生下面这个情况。

也就是表头的位置是出现了选择的样式,但是列表中没有任何一个复选框被选中。

下面是修改后的代码。从table列表里筛找到被选中的数据,再将他们添加到新数组中。接下来再调用方法就可以解决这个问题。

也就是所谓“羊毛出在羊身上”?

另外,可能会出现渲染的问题,所以可以使用 nextTick来处理选中方法。

综上。