【element-ui el-table】多选表格勾选时默认勾选了全部,row-key绑定异常问题解决
项目场景:
Element-UI的el-table组件row-key使用问题
同一个页面使用了几个table,这几个table都使用了多选,row-key属性,其中row-key的绑定方式都是用的静态绑定,row-key=“username”或row-key=“id”,可正常使用,后来升级了node、vue、element-ui plus版本等。。
问题描述
版本升级后出现了勾选table时,默认全部勾选了
因为该页面有好几个table,只有一个table出现了勾选一个全都勾选上了,写法都一致(都是静态绑定)但有的会有问题。
原因分析:
分析静态绑定的属性可能与prop有关联,绑定未生效的属性没有被prop展示:
就是说可正常勾选的表格,在使用row-key=“username”静态绑定的属性,在表格中有使用prop展示username字段,而勾选异常的表格,属性row-key=“id”没有使用prop展示id字段。
不同版本的 Element UI 对 row-key 的容错处理可能不同,低版本可能直接报错,高版本可能静默失败。
解决方案:
使用动态绑定:row-key=“id”:
使用动态绑定时:row-key=“id”,可以正常勾选。
结论
当表格中没有使用prop展示某个字段,但还需要绑定该字段到row-key上时,使用动态绑定。