element-ui table toggleRowSelection 不生效的问题

6 阅读1分钟

事件背景

element-ui的table组件中,有个需求是表格的行可以选中,使用组件轻松实现,然后,当用户下次再打开的时候需要回显,使用element-ui的toggleRowSelection的方法,没有生效。

原因

原因是toggleRowSelection使用有个要注意的点,一个是这个方法使用的场景是需要在组件渲染完毕以后,再调用。 第二个是toggleRowSelection的第一个参数,数据源必须是表格渲染的数据源,就是和表格渲染的没行数据那个对象是一个对象,否则就不会生效。我当初做的时候用了一个单独的变量保存了这个选中的行数据,等回显的时候,再用这个对象进行的回显。一直没有效果,原因就在此。

解决办法

知道原因后,解决办法就很简单了,在回显的时候,通过自己存的那个选中的对象,在现在表格的渲染数据中找到这个对象,然后用table中data的这个对象传到toggleRowSelection中座位第一个参数,就可以轻松实现回显了。

如果没有效果,欢迎找我私聊