表单添加数据,分页组件同步显示到当前添加的数据,分页组件同步跳转到当前页面

一.表单提交做添加的功能会有两个结果

1.数据默认会添加到头部,就不会涉及以下问题

2.数据默认会添加到尾部,会涉及:

           1).数据在最后一页,添加的数据并没能同时的展示出来

           2).分页组件的的分页,因为是点击才能跳转,数据展示到最后一页,需要更新到最后的一页

二.解决步骤:

数据的同步显示步骤:

1.先是判断最后一页是否已经满了(total%pagesize = 0)

     如果满了请求数据中的参数项pageSize+1

     如果没有满就显示最后的页面数据即可

页码同步展示步骤:

1.data中定义一个当前的页面,渲染页面的同时,要更新页面

2.使用.sync可以同步页面

解决代码:

计算当前页面

  computed: {
    // 最后的页面
    maxPage() {
      // math.ceil向上取整
      return Math.ceil(this.total / this.params.pagesize)
    },
    // 计算最后一页是不是满的?
    isLastPageFulled() {
      return this.total % this.params.pagesize === 0
    }
  },

// 添加角色
    async doAdd() {
      // 添加角色
      await addRoles(this.form)
      // console.log(res)
      // 关闭弹窗
      this.dialogVisible = false
      // 改变页码 如果是最后一页已经满了,就增加一页
      if (this.isLastPageFulled) {
        this.params.page = this.maxPage + 1
      } else {
      // 如果最后一页没有满,就是当下那页
        this.params.page = this.maxPage
      }
      this.loadGetRoles()
    },

 保存当前页码

async loadGetRoles() {
      const res = await getRoles(this.params)
      // console.log(res.data.rows)
      this.list = res.data.rows
      this.total = res.data.total
      // 同步更新一下页面,是为了添加数据之后能够同步显示最后的一页数据
      this.curpage = this.params.page
    },

 整页代码:

<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <!-- 放置页签 -->
          <el-tab-pane label="角色管理">
            <!-- 新增角色按钮 -->
            <el-row style="height:60px">
              <el-button icon="el-icon-plus" size="small" type="primary" @click="hadd">新增角色</el-button>
            </el-row>
            <!-- 表格 -->
            <el-table :data="list">
              <el-table-column label="序号" width="120" type="index" :index="typeIndex" />
              <el-table-column label="角色名称" prop="name" width="240" />
              <el-table-column label="描述" prop="description" />
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="small" type="success">分配权限</el-button>
                  <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                  <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-row type="flex" justify="center" align="middle" style="height: 60px">
              <!-- 分页组件 -->
              <el-pagination
                layout="prev,pager,next"
                :total="total"
                :page-size="params.pagesize"
                :current-page.sync="curpage"
                @current-change="hCurrentChange"
              />
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <!-- 弹层 -->

    <el-dialog
      :title="isEdit ? '编辑角色' : '新增角色'"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="closeFn"
    >
      <span>
        <el-form ref="form" :rules="rules" :model="form" label-width="100px">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="角色描述">
            <el-input v-model="form.description" type="textarea" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form></span
      >
    </el-dialog>
  </div>
</template>

<script>
import { getRoles, deleteRoles, addRoles, editRole } from '@/api/settings.js'
export default {
  name: 'Settings',
  data() {
    return {
      isEdit: false,
      // 为了点击新增数据之后能够同步当前的页面
      curpage: 0,
      form: {
        name: '',
        description: ''
      },
      dialogVisible: false,
      total: 0,
      params: {
        page: 1,
        pagesize: 2 // 每页显示
      },
      list: [],
      rules: {
        name: [{ required: true, message: '名字不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    // 最后的页面
    maxPage() {
      // math.ceil向上取整
      return Math.ceil(this.total / this.params.pagesize)
    },
    // 计算最后一页是不是满的?
    isLastPageFulled() {
      return this.total % this.params.pagesize === 0
    }
  },
  created() {
    this.loadGetRoles()
  },
  methods: {
    // 3处弹层关闭,清空表单的数据,为了不让展示上次错误的数据
    closeFn() {
      // 加手动的清空是因为表单中要是description没有加表单验证之后还是会有回填的信息
      this.$refs.form.resetFields()
      this.form.name = ''
      this.form.description = ''
      this.form.id = ''

      // this.form = {
      //   name: '',
      //   description: ''
      // }
    },
    // 编辑角色
    async doEidt() {
      // 发请求修改
      const res = await editRole(this.form)
      // 关闭弹层
      this.dialogVisible = false
      console.log(res)
      // 修改之后再更新到页面上边
      this.loadGetRoles()
    },
    // 添加角色
    async doAdd() {
      // 添加角色
      await addRoles(this.form)
      // console.log(res)
      // 关闭弹窗
      this.dialogVisible = false
      // 改变页码
      if (this.isLastPageFulled) {
        this.params.page = this.maxPage + 1
      } else {
        this.params.page = this.maxPage
      }
      this.loadGetRoles()
    },
    onSubmit() {
      // 手动兜底校验
      this.$refs.form.validate(valid => {
        if (valid) {
          this.isEdit ? this.doEidt() : this.doAdd()
        }
      })
    },
    // 用户点击了太假
    hadd() {
      this.dialogVisible = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },

    typeIndex(index) {
      const curpage = this.params.page // 当前页码，具体看组件取值
      const limitpage = this.params.pagesize // 每页条数，具体是组件取值
      index = index + 1 + (curpage - 1) * limitpage
      return index
    },
    async loadGetRoles() {
      const res = await getRoles(this.params)
      // console.log(res.data.rows)
      this.list = res.data.rows
      this.total = res.data.total
      // 同步更新一下页面,是为了添加数据之后能够同步显示最后的一页数据
      this.curpage = this.params.page
    },
    // 编辑按钮出现弹层,然后数据回填
    handleEdit(scope) {
      this.dialogVisible = true
      // 不能直接写this.form = scope 这样就是引用类型了,然后会展示出来
      // this.form = Array.assgin({}, scope)
      this.form = { ...scope }
      this.isEdit = true
    },
    async doDel(id) {
      await deleteRoles(id)
      // 如果表格中只有一条数据的时候,页码减一,否则会显示Nodate
      // 为啥是1 不是0 因为只有是1了 后面的重新发送请求的this.loadGetRoles()才会是向前一页的,所有需要提前把这1页加上来
      if (this.list.length === 1) {
        this.params.page--
        if (this.params.page <= 0) {
          this.params.page = 1
        }
      }
      this.loadGetRoles()
      this.$message({
        type: 'success',
        message: '删除角色成功!'
      })
      // 重新渲染页面
    },
    handleDelete(id) {
      this.$confirm('是否删除角色?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.doDel(id)
        })
        .catch(() => {})
    },
    async hCurrentChange(curpage) {
      // 更新页面
      this.params.page = curpage
      // 重发请求
      await this.loadGetRoles(this.params)
    }
  }
}
</script>