vue +element 删除按钮操作 （删除单个数据 +删除页码处理 ）

1.配置接口deleteItemById: "/api/goods/deleteItemById", //删除商品操作
2.get请求接口

//   删除接口  后台给我们 返id
    deleteItemById(params){
        return axios.get(base.deleteItemById,{params})
    }
1
2
3
4

3.异步请求接口

async deleteItemById(id){
        let res = await this.$api.deleteItemById({id})
        console.log('删除',res.data);
        }
1
2
3
4

4.删除完数据,表格数据也要跟着变动主要是这行代码 this.deleteItemById(row,id) 在删除事件里边操作

      handleDelete(index, row) {
        console.log('删除操作---',index, row);
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
             this.deleteItemById(row.id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5.删除完数据 下边的分页也要处理 在分页事件里边 把val取出来

//   分页  因为val是局部变量 在data初始化一个变量 给val传递过去
      CurrentChange(val){
        console.log('分页传过来的',val);
        this.current = val//把this.Current给删除的重新渲染页
        this.projectList(val)
      },
1
2
3
4
5
6

6.传递完了给删除接口拿到页，重新把数据渲染到表格里边

// 删除接口
    async deleteItemById(id){
        let res = await this.$api.deleteItemById({id})
        console.log('删除',res.data);
        if(res.data.status===200){
               this.$message({
                type: 'success',
                message: '删除成功!'
            });
            this.projectList(this.current)
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12

7.数据删除了；假如如果当前是最后一页的最后一条数据 删除后 获取上一页的数据 判断 this.total总数目

  // 如果当前是最后一页的最后一条数据 删除后 获取上一页的数据  判断 this.total总数目
            if(this.total%this.pageSize === 1){
                this.curent = this.curent -1 > 0? this.current:1;//最好>1
            }
1
2
3
4

全部代码

 删除
1

删除接口（里边涉及到 删除事件+分页+和重新渲染）

 // 删除接口
    async deleteItemById(id){
        let res = await this.$api.deleteItemById({id})
        console.log('删除',res.data);
        if(res.data.status===200){
               this.$message({
                type: 'success',
                message: '删除成功!'
            });
            // 删除完之后会重新渲染页面
            // 如果当前是最后一页的最后一条数据 删除后 获取上一页的数据  判断 this.total总数目
            if(this.total%this.pageSize === 1){
                this.curent = this.curent -1 > 0? this.current:1;//最好>1
            }
            this.projectList(this.current)
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

删除事件

   handleDelete(index, row) {
        console.log('删除操作---',index, row);
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
             this.deleteItemById(row.id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在删除第3页面数据 的时候，想在第3页看表格数据

 //   分页  因为val是局部变量 在data初始化一个变量 给val传递过去
      CurrentChange(val){
        console.log('分页传过来的',val);
        this.current = val//把this.Current给删除的重新渲染页
        this.projectList(val)
      },
1
2
3
4
5
6

data里边初始化

current =1
1