问题描述
合并单元行以后,首列的多选框也会合并,此时选中该多选框其实是只选中了合并单元行的第一行的多选框,其他的都未被选中。
解决方案
原本想着手动去修改表头的半选状态和全选状态 ,但是没有找到相关方法,后面觉得不如直接把合并单元行里其他几行也同时选中,这样操作比较简单且不容易出错。
手动修改多选框状态的方法为 toggleRowSelection()。
我们是在选中单元行的多选框时才会去调用这个方法,所以该方法需要在 @select里面去操作,然后在 @selection-change里面去处理选中的数据(比如存储起来)。
我们点击合并行的多选框,其实只是选中了合并行里第一行的多选框,然后让合并行内的其他行数据同步去修改多选框状态。然后在 @selection-change里面打印获取的数据。
可以看到是有效果的了,但是!获取的数据不对!
而且取消选中以后数据也是不对!
所以我对方法进行了检查。
然后再进行操作。
从后台打印可以看出来,设想中的第一次打印结果出现在最后一次,所以我进行大胆的猜测:
原本想的是:选中多选框修改状态触发@selection-change的绑定方法打印第一条数据,然后再执行@select绑定的方法,去循环修改其他行的状态,然后每次修改状态都触发@selection-change的绑定方法去打印第二条,第三条,第四条数据。也就是第一行状态修改触发@selection-change =》第二行状态修改触发@selection-change =》第三行状态修改触发@selection-change =》第四行状态修改触发@selection-change
其实应该是:选中多选框以后修改状态,然后触发@select绑定的方法去循环修改其他行的状态,在第一次循环的时候第一行和第二行状态都已经选中了,所以打印两条数据,然后第二次循环、第三次循环打印三条数据、四条数据。最后!在都循环完以后!又触发了一次@selection-change事件!这是第一行修改状态时触发的事件!只不过被放在了最后触发!因为第一行修改完状态以后先触发@select的事件,然后在里面修改了第二行的状态触发了@selection-change的事件,这也解释了为什么第一次打印会有两条数据。所以其实是 第一行状态修改 =》第二行状态修改触发@selection-change =》第三行状态修改触发@selection-change =》第四行状态修改触发@selection-change =》最后触发第一行的@selection-change事件。
所以思路也很明确了,让第二次、第三次、第四次触发延后,让第一次触发先开始,所以我们要让循环方法延后执行。
效果实现了,打印的数据也对了。
取消选中的打印数据也是正确的。
这是我自己的一些不成熟的解决思路,如果有更好的方法,欢迎讨论