主页 > 开源代码  > 

【解决问题】----解决avue-crud表格勾选数据翻页后界面保持选中

【解决问题】----解决avue-crud表格勾选数据翻页后界面保持选中
1. 错误预览

第一页选择【7、8、9、10】

直接点击第三页未进行选择

直接点击第四页未进行选择

2. 问题总结 通过测试可以看到,页面的选择项会影响到其他页面的选择;点击保存,返回的数据却是真真选择的数据;数据在选择渲染的时候出现了混乱。 3. 分析问题原因 其实这就是 vue 中列表渲染的 key 作为唯一标识,在设置的时候没有给表格添加上。 4. 解决办法 4.1 解决方案一:设置一个表格 row 的唯一标识 selection 配置表格是否可选择;reserveSelection 在数据更新之后保留之前选中的数据;rowKey 行数据的 Key,用来优化 Table 的渲染(注意:rowKey 必须是表格列表中的唯一标识,如果存在重复,依然会出现渲染错误)。 selection: true, reserveSelection: true, rowKey: 'spuId', 4.2 解决方案二:列表后端返回时就返回一个唯一标识的id属性【或者前端构建一个】

5. 官方文档

官方文档: avue-crud 的 option 配置

5.1 reserveSelection 的默认值和解释

5.2 rowKey 的默认值和解释

6. 总结 由于配置属性太多,开发的时候都是需要什么,再去找什么,所以此篇博客作为一个记录,方便后期出现相同或类似问题进行查找;分析出现问题的原因,去查找文档对应的设置,完善配置;开发的时候,查看文档细心一点阅读,可以避免开发中遇到的大多数问题。
标签:

【解决问题】----解决avue-crud表格勾选数据翻页后界面保持选中由讯客互联开源代码栏目发布,感谢您对讯客互联的认可,以及对我们原创作品以及文章的青睐,非常欢迎各位朋友分享到个人网站或者朋友圈,但转载请说明文章出处“【解决问题】----解决avue-crud表格勾选数据翻页后界面保持选中