vue项目中表格删除数据页码显示注意点

在做管理系统的过程中，想必大家都接触过表格的增删改查吧，最近我在项目中发现，对于表格删除和批量删除时，有个细节项目组的前端开发并没有注意到，显然也没有去处理，测试人员居然也没去测试这个场景。

当我们表格切换页码至最后一页时，有两种场景。1、只有一条数据时，点击表格中删除按钮或者全选点击批量删除，2、多条数据全选点击批量删除。删除的时候我们需要对当前页码进行一个处理，要不然会显示异常。如下图

场景一：只有一条数据时，点击表格中删除按钮或者全选点击批量删除

删除之后

场景二：多条数据全选点击批量删除

删除之后

这样的显示效果显然是不正确的，因此我们必须要做一些处理，处理的代码（axios未做封装，数据key: "value"， token: "XXX"，url = "url"都是代指，代码与实际项目中项目做了一些调整，相信大家能看明白）如下：

data中的部分定义：

totalCount: 0, //总条目数
currentPageIndex: 1, //当前页码
pageSizeNum: 10, //每页显示的条目数
selectArr: [],//批量删除选择的数据复制代码

methods中的部分代码：

    /**     *删除数据API，批量删除时，key为字符串以','拼接     * @param {String} paramData:删除的数据     * @param {String} delFlag:"volumeDelete"表示批量删除，可选参数     */deleteTableItem(paramData, delFlag) {     let url = "url";      let data = {        key: "value"     };      let param = {        data: data,        token: "XXX"      };      axios.post(url, param).then(res => {        if (res.data.code == 200) {          if (    this.totalCount - (this.currentPageIndex - 1) * this.pageSizeNum ==              1 || //最后一页，只有一条数据时，点击表格中删除按钮            (delFlag == "volumeDelete" &&              this.totalCount -                (this.currentPageIndex - 1) * this.pageSizeNum ==                this.selectArr.length) //最后一页，点击批量删除按钮时          ) {            //处理页码显示问题            this.currentPageIndex =              this.currentPageIndex == 1                ? this.currentPageIndex                : this.currentPageIndex - 1;          }          this.queryTableData();        }      });    },/**     *查询数据API     */    queryTableData() {      let url = "url";      let data = {        key: "value"      };      let page = {        index: currentPageIndex, //当前页码        pageSize: pageSizeNum //每页显示的条目数     };      let param = {        data: data,        page: page,        token: "XXX"      };      axios.post(url, param).then(res => {        if (res.data.code == 200 && res.data.data) {          this.tableData = JSON.parse(JSON.stringify(res.data.data)); //获取表格数据          this.totalCount = res.data.totalCount; //获取总条目数          this.selectArr = []; //清空批量删除选择的数据        }      });    }
复制代码

在删除接口中对当前页码进行了处理，在查询数据的接口中获取总条目数，并且清空批量删除选择的数据。

再次说明，此代码只是为了展示，并非实际项目中的代码，因此未对axios做封装，数据key: "value"， token: "XXX"，url = "url"都是代指。

转载于:https://juejin.im/post/5c2b483d51882575f56054f8

vue项目中表格删除数据页码显示注意点相关推荐

在vue项目中实现将数据导入Excel 三种方式(.xlsx , .csv)
方法一 Vue 将页面中表格数据导出excel 一.需要安装三个依赖: npm install -S file-saver xlsxnpm install -D script-loader 二.项目中 ...
vue项目中常用的优秀插件库
1. vue的ui框架: pc端UI框架:iview,element-ui 移动端UI框架:参考https://www.jianshu.com/p/c3c671787d1d 2. vue的数字动画插件 ...
VUE项目中如何实现表格数据的懒加载
vue+elementUI table表格展示数据,当数据很多的时候,不能一页显示完,同时一次请求数据量太大,会增加网页渲染的时间,影响体验, 这个时候常常有两种方法处理, 1.分页处理如果不想分页 ...
vue项目中实现下载后端返回的excel数据表格
查看更多资源 1. 案例简介: vue项目中,客户端需要实现以excel表格形式下载数据,后端为java,接受请求 >> 读取数据库 >> 生成excel >> 返 ...
Vue项目中指定区域的表格数据导出为Excel文件
vue项目中导出excel时有是会需要指定导出的区域如下图操作部分我们不需要导出只导出表格部分简记录下实现过程赋代码一. 安装三个依赖项 npm install -S file-saver np ...
vue之猫眼json数据的获取直接用于自己的vue项目中,swiper轮播插件的坑
vue之猫眼json数据的获取直接用于自己的vue项目中遇到问题总结: 加载不出猫眼数据,无法调用,数据被限制猫眼电影图片的拼接及删除问题 swiper的迷幻坑** 首先来说一下第一问题加载不出 ...
Vue项目中获取数据后使用swiper轮播，无法轮播且 autoplay 和 loop 失效问题！
Vue项目中获取数据后使用swiper轮播,无法轮播且 autoplay 和 loop 失效问题! 问题表现:轮播组件显示第一张图,可拖动但无法切换到下一张图.但是F12控制台切换屏幕后能正常轮播但无 ...
vue项目中table表格固定表头和首尾列
在html中实现table表格固定表头和首尾列的方法和文章很多,本文就不再赘述. 本文主要介绍vue项目中三种情景下实现table表格固定表头和首尾列情景一:vue+element 只要在el-ta ...
【VUE 项目中使用luckysheet（在线表格）】
VUE 项目中使用luckysheet 描述资料本地引入组件开发创建组件组件使用使用中遇到的问题 1. 后台图表chartMix报undefined 2. 回显时默认显示第一个sheet ...

vue项目中表格删除数据页码显示注意点

vue项目中表格删除数据页码显示注意点相关推荐

最新文章

热门文章