保定网站建设的过程,163k地方门户网站系统,做小程序要多少钱,做投诉网站赚钱吗我实现的功能是在 element ui 的分页组件中进行分页查询时#xff0c;如果当前有未保存的修改数据就提示用户#xff0c;用户可以选择是否放弃未保存的数据。确认放弃就重新查询数据#xff1b;选择不放弃#xff0c;不重新查询#xff0c;并且显示条数选择框保持原样如果当前有未保存的修改数据就提示用户用户可以选择是否放弃未保存的数据。确认放弃就重新查询数据选择不放弃不重新查询并且显示条数选择框保持原样选择框中文字与选择列表中选择项页数跳转也是同样的功能。 例子说明当我们修改了表单某项数据但未保存时。 更改每页显示条数我们点击显示条数选择框的 20条/页此时会弹出一个提示如图。选择确定就重新查询渲染未保存数据就丢失了选择取消的话不重新查询并且显示条数保持 10条/页打开选择列表也是 10条/页。 页数跳转我们点击第二页或者下一页按钮同样跳出提示如图选择确定就重新查询渲染未保存数据就丢失了选择取消的话不重新查询并且仍然选中的是第一页。 动态演示 首先我们要如何判断用户修改了表单呢我采用的方法是在查询数据时深拷贝一份返回的数组数据。然后在分页改变时对比两者。 el-paginationsize-changehandleSizeChangecurrent-changehandlePageChange:current-page.synccurrentPage:page-sizes[10, 20, 40, 80]:page-sizepageSize:totaltotalCountlayoutsizes, prev, pager, next/el-pagination data() {return {currentPage: 1,cachedPage: 1,pageSize: 10,cachedPageSize: 10,totalCount: 0,loading: false, // 是否显示加载中originalData: [],formData: {tableData: [],rules: {}}}},methods: {handleSizeChange(val) {if (!this.isEqual()) {this.$confirm(当前有未保存数据确定要继续吗?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {this.cachedPageSize val;this.pageSize val;this.getData();}).catch(() {this.pageSize this.cachedPageSize;})} else {this.cachedPageSize val;this.pageSize val;this.getData();}},handlePageChange(val) {if (!this.isEqual()) {this.$confirm(当前有未保存数据确定要继续吗?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {this.cachedPage val;this.currentPage val;this.getData();}).catch(() {this.currentPage this.cachedPage;})} else {this.cachedPage val;this.currentPage val;this.getData();}},// 判断表单数据是否改变isEqual() {for (let i in this.formData.tableData) {const obj this.formData.tableData[i];for (let key in obj)if (obj[key] ) obj[key] null; // 属性值为null经过修改再删除会变为,故将两者看做相等}const newData this.formData.tableData.map((obj) {const newObj Object.assign({}, obj);delete newObj.changed; // changed是告诉后端那些项修改了 对比时要删除return newObj;})return JSON.stringify(newData) JSON.stringify(this.formData.tableData);},async getData() {const isLoading this.loading(加载中);const params {page: this.currentPage,page_size: this.pageSize}const { code, data, count } await getDataList(params); // 请求列表数据if (code 200) {this.originalData JSON.parse(JSON.stringify(data));this.$set(this.formData, tableData, data);this.totalCount count;isLoading.close();}}} 这样修改后页数跳转可以恢复原来的页数但是 条/页 没有恢复。 又从F12里查找对应 dom 元素尝试进行修改获取 el-pagination 的引用并且给分页选择框加上类属性 one 来方便获取。 el-paginationrefpaginationsize-changehandleSizeChangecurrent-changehandlePageChange:current-page.synccurrentPage:page-sizes[10, 20, 40, 80]:page-sizepageSize:totaltotalCountlayoutsizes, prev, pager, next:popper-classone/el-pagination.catch(() {this.pageSize this.cachedPageSize;const pagination this.$refs.pagination;const select pagination.$el.querySelector(.one .el-input__inner);select.value ${this.cachedPageSize}条/页;const ul document.querySelector(.el-select-fropdown__list);const fn () {const lis ul.querySelectorAll(li);lis.forEach(li {li.classList.remove(selected);})const arr [10, 20, 40, 80];let index arr.indexOf(this.pageSize);let changedLi lis[index];changedLi.classList.add(selected);}fn();ul.addEventListener(mouseover, fn);}) 结果显示看着是符合的但是选择 20条/页 后取消应该是 10条/页 无法点击20条/页 可以点击但是结果是 10条/页 可以点, 20条/页 无法点即虽然改变了样式但是 element ui 仍然认为我们点击了 20条/页现在处于 20条/页。 感觉只能去修改 element ui 的源码逻辑了否则无法满足我的需求要么就自己写一个分页组件。这时我突然想到正常的每页显示条数我们每次点击后不是会自己自动跳转到对应的 条/页 吗。于是想到了我直接将对应原来的 条/页 的 li 标签触发一次 click 然后跳过提示弹框与重新请求数据不就好了吗
data中新增 changedFlag: false,handleSizeChange(val) {if (!this.changedFlag !this.isEqual()) {this.$confirm(当前有未保存数据确定要继续吗?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {this.cachedPageSize valthis.pageSize valthis.getData()}).catch(() {this.pageSize this.cachedPageSize;const ul document.querySelector(.one .el-select-fropdown__list);const lis ul.querySelectorAll(li);const arr [10, 20, 40, 80];let index arr.indexOf(this.pageSize);let changedLi lis[index];this.changedFlag true;changedLi.click();})} else { // 判断是否是changedLi触发clickif (this.cachedPageSize val) {this.changedFlag false;this.pageSize val}else {this.changedFlag false;this.cachedPageSize val;this.pageSize val;this.getData();}}}, 最终达到想要的效果
