删除功能与添加功能遇到的问题

hello 今天我们来一起看看  删除功能常见的小bug 与添加功能的细节优化吧~

删除功能:

   步骤: 

   交互效果

        1.点击表格删除按钮事件，显示弹框 询问用户是否确定删除

        2.用户点击确定按钮之后进行删除操作（封装api，以备调用）

        3.用户点击取消按钮之后关闭弹框不进行任何操作

        elementUI中提供的弹出框

   删除功能逻辑实现

        1提炼一个单独的删除功能

        2.根据id去发ajax来做删除

        3.提示用户操作成功 调用删除功能

        4.更新页面，重发请求

        5.在删除按钮的回调函数中 弹出确认框, 并在用户确认删除时去调用删除功能

单独封装的请求   接收传过来的id
async doDel(id) {
  try {
    const res = await 删除接口要根据id来进行删除(id)
    console.log(res)
    // 1. 提示
    this.$message.success('删除成功')

    // 2. 重新请求
    this.调用单独封装的请求数据接口()

  } catch (err) {
    console.log(err)
    this.$message.error('删除失败')
  }
},


// 用户点击了删除 传入id 传给调用的接口
  hDel(id) {
     // 询问框  点击了确认进入.then 点击取消进入.catch
    this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {

       // 确认删除调用单独封装的接口 并给他传入id
      this.doDel(id)

    }).catch((err) => {
       // 点击取消 提示一下
      console.log(err)
      this.$message({
        type: 'info',
        message: '已取消删除'
      })
    })
  }

会遇到的问题: 删除分页数据的异常处理

   问题: 如果删除最后一页的最后一条数据之后，页面会显示不正常

   思路: 在删除成功之前，去检测一下存放数据的地方，当前删除的数据是否是当前页码的最后一条数据，如果是，就把页码-1，再发请求

data(){
 return{

    pageParams: {
        page: 1, // 页码数
        pagesize: 5 // 每页几条数据
      },

}}






async doDel(id) {
  try {
    const res = await deleteRole(id)
    console.log(res)
    // 1. 提示
    this.$message.success('删除成功')

    // 2. 如果当前表格中只有一条，删除之后自动请求上一页数据
     //判断当前存放数据list 里面的数据长度   等于1是因为 在删除之前数据还没来的级更新 常看Natwok
+    if (this.list.length === 1) {
        // 若果是 把当前的页码减减
+      this.pageParams.page--
+      if (this.pageParams.page <= 0) {  // 保险起见不能 如果删除完等于0  就让他等于1 
+        this.pageParams.page = 1    
+      }
+    }

    // 3. 在重新请求
    this.loadRoles()
  } catch (err) {
    console.log(err)
    this.$message.error('删除失败')
  }
}

添加功能:

        基本要求

          1. 点击新增角色事件 展示弹框

          2.弹框中有两个表单项：角色名称和角色描述，其中角色名称为必填项

          3.点击确定按钮先进行表单验证，验证通过之后调用新增接口创建角色

          4.点击取消按钮弹框关闭，并清空表单内容及验证内容

<!-- 新增弹框 -->
<el-dialog
    标题
   title="编辑弹层" 
    防止点击空空白处也会关闭页面
   :close-on-click-modal="false"
    防止按esc键关闭弹窗
   :close-on-press-escape="false"
    控制显示隐藏
   :visible.sync="showDialog">

  <el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="100px">

    <el-form-item label="角色名称" prop="name">
      <el-input v-model="roleForm.name" />
    </el-form-item>

    <el-form-item label="角色描述">
      <el-input v-model="roleForm.description" />
    </el-form-item>

  </el-form>
  <!-- 底部 -->
  <el-row slot="footer" type="flex" justify="center">

    <el-col :span="6">
      <el-button size="small">取消</el-button>
      <el-button size="small" type="primary" @click="hSubmit">确定</el-button>
    </el-col>

  </el-row>
</el-dialog>

在data中补充添加3个数据项：

showDialog: 来表示弹层是否关闭

roleForm:表单数据，具体的字段名称与后端接口一致

rules：验证规则

data () {
  return {
    显示隐藏
    showDialog:false,
    自己定义的表单数据 要与接口文档要求的名称一致  添加时要显示true
    roleForm:{
      name: '',
      description: ''
    },
    校验规则
    rules:{
      name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }]
    }
}

思路

确定按钮要通过表单校验，调用接口，成功调用之后要完成三件事情

1.重新拉取角色列表，让新增的数据得以显示

2.提示用户本次操作已成功

3.关闭弹框

封装接口导出  并在用的组件导入

额外封装一个添加方法来实现添加功能。当添加成功后：

 1.重新加载数据

 2.提示用户

 3.关闭弹层

//单独封装的添加方法 
async doAdd() {
  try {
    const res = await 添加方法接口 参数是表单的数据后台接口要求(this.roleForm)
    console.log(res)

    成功添加后更新数据
    this.loadRoles()

    提示用户
    this.$message.success('添加成功')

    关闭弹窗
    this.showDialog = false
  } catch (err) {
    失败提示
    this.$message.error('添加失败')
    console.log(err)
  }
}  

手动兜底验证

// 用户点击了保存 手动兜底验证
hSave() {
    前提需要给表单绑定ref='from' 这里是什么 下面必须一样的名称
  this.$refs.from.validate(valid => {
    if (valid) {
      // 成功 调用接口
    	this.doAdd()
    }
  })
}

添加数据页码跳转不正常数据过去了 但是页码不跟着变动

elementUI中页码有一个事件  

<el-pagination
     layout="prev, pager, next"
     :total="total"
   // 这个事件是elementUI自带的能监听到页码的变化 curpage 单独在data中定义的数据
    //  this.curPage = this.pageParams.page 在更新数据接口的页码数 同步curpage page是页码数

+    :current-page.sync="curPage"

     :page-size="pageParams.pageSize"
     @current-change="hCurrentChange"
/>

计算属性 计算当前页码是不是漫数据 和第几页是数据

在计算计算属性中定义个方法

computed: {

    // 计算表格中最大的页码
    maxNum() {
            向上取整    一共几条数据      一个页面几个数据
      return Math.ceil(this.total / this.pageParams.pageSize)
    },
    // 计算最后一页是不是满的
    isLastPageFulled: function() {
             一共几条数据        页面数据是不是满的或者没有
      return this.total % this.pageParams.pageSize === 0
    }
  },

修改事件

async doAdd() {
      try {
        // 1. 调用接口
        const res = await addRole(this.form)
        // 2. 关闭弹层
        this.showDialog = false
        // if(表格的最后一页是满) {
        //   想查看最新添加的数据，要跳到最大页码的下一页
        //  }
               计算属性如果是没数据等于true
       + if (this.isLastPageFulled) {
              让页码数 +1付给data数据中的页码
       +   this.pageParams.page = this.maxNum + 1
       + } else {
                没有就是当前的页码
          // 想查看最新添加的数据，要跳到最大页码
       +   this.pageParams.page = this.maxNum
        }
       
        // 3. 重发请求
        this.loadRoles()
        console.log(res)
      } catch (err) {
        console.log(err)
      }
    },

好了 我们下次再见