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

本文主要是介绍【解决问题】---- 解决 avue-crud 表格勾选数据翻页后界面保持选中，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. 错误预览

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

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

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

2. 问题总结

1. 通过测试可以看到，页面的选择项会影响到其他页面的选择；
2. 点击保存，返回的数据却是真真选择的数据；
3. 数据在选择渲染的时候出现了混乱。

3. 分析问题原因

1. 其实这就是 vue 中列表渲染的 key 作为唯一标识，在设置的时候没有给表格添加上。

4. 解决办法

4.1 解决方案一：设置一个表格 row 的唯一标识

1. selection 配置表格是否可选择；
2. reserveSelection 在数据更新之后保留之前选中的数据；
3. rowKey 行数据的 Key，用来优化 Table 的渲染（注意：rowKey 必须是表格列表中的唯一标识，如果存在重复，依然会出现渲染错误）。

  selection: true,reserveSelection: true,rowKey: 'spuId',

4.2 解决方案二：列表后端返回时就返回一个唯一标识的id属性【或者前端构建一个】

5. 官方文档

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

5.1 reserveSelection 的默认值和解释

5.2 rowKey 的默认值和解释

6. 总结

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

这篇关于【解决问题】---- 解决 avue-crud 表格勾选数据翻页后界面保持选中的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---