博客围绕Element UI表格复选框默认选中问题展开。在column设置复选框后，文档未提及默认选中方法，可通过ELTable的toggleRowSelection方法手动选中，但因table在dialog里存在ref注册问题。最终采用定时器解决，还说明了调换行顺序时reserve - selection和rowKey的使用要点。
场景
1、在column中设置type="selection"可以用checkbox复选框2、element-ui文档中没有交代怎样根据数据源默认选中复选框3、但是可以考虑用ELTable的toggleRowSelection方法在合适的时间手动选中4、如果要用ELTable的方法，就需要用注册ref，才能在其父组件中调用其方法5、此时发现table是在dialog里面的，如果dialog不打开，table的ref是注册不了的（可以给dialog的visible默认为true，但是又有个问题是页面加载出来dialog就打开了，就算在第一时间关掉，还是会闪屏一下）
解决方法
6、可以用一个定时器来解决问题，虽然很low，但是效果显著，此过程响应很快，用户感知不到是默认选中还是加载之后手动选中7、（提下此处需求：用户可以选中任意复选框，可以交换任意相邻行顺序，取消按钮取消操作，保存按钮提交选中的行）至于注释中说到，此处要用reserve-selection且不能用rowKey，原因是在调换表格行顺序时，如果未设置reserve-selection，将会丢失表格中所有的复选框选中状态。如果设置了rowKey，在用户选中某行（原状态未选中）并取消提交后，再次打开dialog并渲染表格时，该行为默认选中状态。所以此处不必理会element-ui在控制台报出的“如果设置了reserve-selection，rowKey为必选项”警告
扫一扫
762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
