持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第23天，点击查看活动详情

增加业务

1.点击新增按钮弹出对话框表单

2.填写表单,表单数据绑定到data,表单校验

3.点击对话框的确定按钮触发兜底校验,

校验成功发送新增请求,关闭对话框,重新发请求数据渲染界面

注意:

1.对话框显示与隐藏使用一个变量

<el-dialog :visible.sync="dialogVisible" />//data中dialogVisible默认为false

2.表单项变量名由接口文档决定

3.表单校验如果复杂可以设定自定义校验规则

 // 自定义校验规则
    const validCode = (rule, value, callback) => {
      // (1)传入的value编码不能和其他编码重复
      // (2)得到一个编码数组
      const existCodeList = this.originList.map(item => item.code)
      // (3)如果编码数组中没有value则校验通过,否则不通过
      existCodeList.some(item => item === value) ? callback(new Error(`编码${value}已经存在`)) : callback()
      // existCodeList.includes(value) ? callback(new Error('编码' + value + '已经存在')) : callback()
    }

4.增加与修改共用一个表单时

设定一个是否编辑的变量:isEdit,点击编辑时把isEdit赋值为true,点击新增时把isEdit赋值为false,

• 根据isEdit的值,
• 来显示对话框的标题是新增还是编辑,
• 来确定点击确定是走新增还是保存修改的ajax

删除业务

1.点击删除按钮注册点击事件

通过作用域插槽传过来的scope的得到当前删除项的id

传递id给事件

2.methods中删除事件通过传过来的id,

发送ajax请求删除具体的某一个选择项,

删除成功重新请求数据渲染界面

注意:

删除时刻添加确认框 this.$confirm

this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

修改业务

1.点击修改按钮注册点击事件

显示对话框

使用作用域插槽传过来的scope的得到当前选择项的id传给注册的事件

2.对话框表单数据回填

根据点击按钮传过来的id,然后发送ajax请求获得当前选项的数据

然后数据回填到对话框的表单项(ajax返回数据绑定到data,v-model绑定data)

数据回填，this.roleForm=row。对象的赋值容易出现,浅拷贝的问题：改一个另一个也变

    // 绑定数据到data 避免编辑时表格中数据也变
      this.roleForm = { ...row }

3.修改表单数据

修改数据为需要的数据

单独表单校验,点击确定兜底校验

 this.$refs.deptForm.validate(valid => {
        if (valid) {
          // 如果是编辑 则走调编辑方法,否则调新增
          this.isEdit ? this.doEdit() : this.doAdd()
        }
      })

4.点击确定修改兜底校验

兜底校验通过后,根据后端接口发送ajax请求

修改成功关闭对话框

提示修改成功

重新加载页面

增加与修改共用一个表单时

设定一个是否编辑的变量:isEdit,点击编辑时把isEdit赋值为true,点击新增时把isEdit赋值为false,

• 根据isEdit的值,
• 来显示对话框的标题是新增还是编辑,
• 来确定点击确定是走新增还是保存修改的ajax

查询业务

1.页面打开加载数据

created钩子最早获取到数据,在这里面发送请求数据

得到数据绑定到data,把data数据渲染到页面上

2.分页查询

分页组件 绑定总页数total,页码大小,页码变化事件,页码一页大小变化事件

<el-pagination layout="total, sizes, prev, pager, next, jumper"
:page-sizes="[5,10,15,20]"
:page-size="size"
:total="total"
@size-change="hSizeChange"
@current-change="hCurrentChange" />

变化页码数

把传递过来的当前页码数绑定到data中的page请求参数

根据新的参数重新发请求渲染界面

变换页码一页大小

把传递过来的当前页码一页大小数绑定到data中的pagesize请求参数

根据新的参数重新发请求渲染界面

注意点:

1.删除最后一条数据的时候，页码--

        if (this.roles.length === 1) {
          let page = this.pageParams.page
          page--
          // 页码不能减是0
          // if (this.pageParams.page === 0) {
          //   this.pageParams.page = 1
          // }
          page = Math.max(1, page)
          this.pageParams.page = page
        }

2.添加数据，要显示添加之后的效果：跳转到最后一页

       this.total++// 总数加1
        // 跳转到最后一页
        this.pageParams.page = Math.ceil((this.total) / this.pageParams.pagesize)

总结

以上每一个ajax请求都要包裹在try,catch中

避免请求错误影响整个页面无法加载

例如:

    async doAdd() {
      try {
        const res = await addPermission(this.formData)
        this.showDialog = false
        this.loadPermissionList()
        this.$message.success('添加成功')
      } catch (err) {
        console.log(err)
        this.$message.error('添加失败')
      }
    },