用element-ui ELDialog和ELTable遇见的坑

Posted 2023-03-17

参考技术A 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为必选项”警告

vue element-ui更新版本后，警告[Element Migrating][ElDialog][Attribute]: size is removed.

element-ui更新版本后Icon的变化
原来在input组件中可以用icon这个属性指定icon

<el-input
placeholder="请输入用户名"
icon="search"
v-model="input"
:on-icon-click="handleIconClick">
</el-input>

现在新版element-ui这样写是不生效的：
可以通过prefix-icon 和 suffix-icon 属性在 input 组件的首部和尾部增加显示图标，也可以通过 slot 来放置图标。

<el-input
placeholder="请输入用户名"
suffix-icon="search"
v-model="input"
:on-icon-click="handleIconClick">
</el-input>