2021-11-25_学习B站Spring Boot+vue项目step009_分页查询及删除相关

继续昨天的4.3 查询。当前页及每页个数这两个修改时触发刷新表格。

Pagination 分页组件。

current-page、page-size这两个属性支持v-model双向绑定。

<el-pagination
          v-model:current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          v-model:page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total=total
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      >

// 改变每页个数 触发
    handleSizeChange() {
      this.load()
    },
    // 改变当前页码 触发
    handleCurrentChange() {
      this.load()
    }

4.4 删除

Pop Confirm 气泡确认框。confirm事件：点击“确认”时，触发该事件。

<template #default="scope">
          <el-button type="text" @click="handleEdit(scope.row)"
          >编辑</el-button
          >
          <el-popconfirm title="确认删除吗？" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button type="text">删除</el-button>
            </template>
          </el-popconfirm>
        </template>

handleDelete(id) {
      console.log(id)
      request.delete("api/user/" + id).then(res => {
        if (res.code === '0') {
          ElMessage({
            type: "success",
            message: "删除成功"
          })
        } else {
          ElMessage({
            type: "error",
            message: res.msg
          })
        }
        this.load() // 重新加载表格
      })
    },

/**
     * 注解@DeleteMapping用来删除
     *
     * "/{id}这种占位符的方式，我们需要通过@PathVariable注解来实现数据的获取。
     * 若多个参数，@DeleteMapping("/{id}/{aa}")
     * 则public Result<?> delete(@PathVariable Long id, @PathVariable String aa)
     */
    @DeleteMapping("/{id}")
    public Result<?> remove(@PathVariable Long id){
        userService.removeById(id);
        return Result.success();
    }