提升Element UI分页查询用户体验与交互：实现修改未保存提示

前言

        可以搭配食用：Element UI 实战：跨页保存表格选中状态与判断状态可选性的高效方案

        我实现的功能是在 element ui 的分页组件中进行分页查询时，如果当前有未保存的修改数据就提示用户，用户可以选择是否放弃未保存的数据。确认放弃就重新查询数据；选择不放弃，不重新查询，并且显示条数选择框保持原样（选择框中文字与选择列表中选择项），页数跳转也是同样的功能。

例子说明：当我们修改了表单某项数据但未保存时。
        更改每页显示条数：我们点击显示条数选择框的 '20条/页'，此时会弹出一个提示如图。选择确定就重新查询渲染，未保存数据就丢失了；选择取消的话，不重新查询，并且显示条数保持 '10条/页'，打开选择列表也是 '10条/页'。

        页数跳转：我们点击第二页或者下一页按钮，同样跳出提示如图，选择确定就重新查询渲染，未保存数据就丢失了；选择取消的话，不重新查询，并且仍然选中的是第一页。

动态演示 

      

实现

监听用户修改表单

        首先我们要如何判断用户修改了表单呢？我采用的方法是在查询数据时，深拷贝一份返回的数组数据。然后在分页改变时对比两者。

 <el-pagination
    @size-change="handleSizeChange"
    @current-cha