用element-ui ELDialog和ELTable遇见的坑

用element-ui ELDialog和ELTable遇见的坑_第1张图片
场景

1、在column中设置type="selection"可以用checkbox复选框

2、element-ui文档中没有交代怎样根据数据源默认选中复选框

3、但是可以考虑用ELTable的toggleRowSelection方法在合适的时间手动选中

4、如果要用ELTable的方法,就需要用注册ref,才能在其父组件中调用其方法

5、此时发现table是在dialog里面的,如果dialog不打开,table的ref是注册不了的(可以给dialog的visible默认为true,但是又有个问题是页面加载出来dialog就打开了,就算在第一时间关掉,还是会闪屏一下)

用element-ui ELDialog和ELTable遇见的坑_第2张图片
解决方法

6、可以用一个定时器来解决问题,虽然很low,但是效果显著,此过程响应很快,用户感知不到是默认选中还是加载之后手动选中

7、(提下此处需求:用户可以选中任意复选框,可以交换任意相邻行顺序,取消按钮取消操作,保存按钮提交选中的行)

至于注释中说到,此处要用reserve-selection且不能用rowKey,原因是在调换表格行顺序时,如果未设置reserve-selection,将会丢失表格中所有的复选框选中状态。如果设置了rowKey,在用户选中某行(原状态未选中)并取消提交后,再次打开dialog并渲染表格时,该行为默认选中状态。所以此处不必理会element-ui在控制台报出的“如果设置了reserve-selection,rowKey为必选项”警告

你可能感兴趣的:(用element-ui ELDialog和ELTable遇见的坑)