vue增删改查

大家好，我是青豆恩，今天我给大家讲解一下前端
vue做增删改查。它使用到的技术栈是vue+element+es6
我们先来看一下页面，点击查询可以查询到想要的信息
点击新增会有一个弹出框，点击修改也是，点击查看就会
有一个不可编辑的弹出框。点击删除可以删除一条信息。

我们使用的编辑器是vscode，文件代码分为三部分。
<template></template>
<script>
export default{
}
</script>
我们重点关注<template>（html）部分和js部分
import是引入对象，export暴露自身vue示例对象主要代码写在
export default的暴露对象下

首先我们先写查询的功能
这里用到了element-ui组件库中的input、button输入框组件。
在这个查询的功能里一些属性的讲解
1.
:inline="true"
设置 inline 属性可以让表单域变为行内的表单域
type=text说明input框能输入字符串类型的文本，一般type默认就是
text，text类型的可以输入任何字符

2.
element组件库的Dialog对话框默认可以通过点击modal
关闭 Dialog，即点击空白处弹框可关闭。
:close-on-click-modal="false"
这里这样写，它就不会点击空白而关闭

3.
:visible.sync="visible"
:visible指的是属性绑定，表示弹框的显示隐藏，
当:visible的值为ture的时候，弹框显示，当为false的时候，弹框隐藏.
后面的.sync是什么意思呢，指的就是同步动态双向的来表示visible的值，
当我们关闭窗口的时候，这个弹框隐藏了，visible的值发生了变化，但是关闭窗口
这个动作，我们没法用确定的动作去判断这个值，所以用到了vue中的双向绑定的原则，
在vue中统一加上了.sync来表示同步的修改了visible的值。

4.ref="dataForm"
1.基本用法，本页面获取dom元素 
2.获取子组件中的data
3.获取方法

5.这里是一个三目运算方法
什么是三目运算：(布尔表达式 ? 值0:值1;)
<el-dialog
  :title="!dataForm.id ? '新增' : !disabled ? '修改' : '查看'"
    
    
6.Vue.js中this.$nextTick()的使用
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。
在修改数据之后立即使用它
// 查看详情
  showDetails (id) {
  this.addOrUpdateVisible = true
   this.$nextTick(() => {
   // 父组件通过ref拿到组件addOrUpdate，然后调用它的init方法
   this.$refs.addOrUpdate.init(id, true)
        })
      },
      

7.   // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },

@select-change是element封装的复选框选择事件，
selectChangeHandle是你自己自定义的方法名称，
用来接收change事件，val这个参数是element组件抛出来给你的
      
      
8.来梳理一下init方法
init(id,disabled){
}
 this.disabled = disabled
这里传进来了两个参数一个是id，一个是disabled
这个您看上面的<el-dialog>里的三目判断里，会让您判断这个到底是修改
还是查看，然后也只有查看传了一个true的属性.
而您看data中有一个默认值是disabled=false，说明此时的页面是可以编辑的
这里用于判断查看与修改.

this.dataForm.id = id || '' // id赋值，没有就赋值空
代码里一个等号都是赋值的意思

this.visible = true //这个是这个弹窗能否显示的意思

  this.$nextTick(() => {
   this.$refs['dataForm'].resetFields()   // 每次进来先清空重置表单，防止上一次打开弹窗有遗留的数据
    if (this.dataForm.id) {  // 如果是修改就请求这一行的数据，保证拿到的是最新的数据
    this.$http({
      url: `/pesticide/crop/info/${this.dataForm.id}`,
      method: 'get'
     }).then(({data}) => {
     if (data && data.code === 0) {
       this.dataForm = data.crop    // 请求到的当前行数据赋值给表单
        }
      })
       }
     })
      },
      
      
9.// 查看详情
      showDetails (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          // 父组件通过ref拿到组件addOrUpdate，然后调用它的init方法
          this.$refs.addOrUpdate.init(id, true)
        })
      }

      
10.表单提交方法
// 表单提交
      dataFormSubmit () {
        this.$refs['dataForm']
          .validate((valid) => {   // 校验表单是否为空或其他限制
            if (valid) {   // valid为true说明校验通过
              this.$http({
     //`${变量}`  这是es6的语法
    //这是后台用来区分是新增的还是编辑的，让前端传这个字符 'save'
                url: `/pesticide/crop/${!this.dataForm.id ? 'save' : 'update'}`,
                method: 'post',
                data: this.dataForm
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500
                  })
                  this.visible = false
                  this.$emit('refreshDataList')    // 传值给父组件，这里没写第二个参数，那么父组件接收到的参数就为空
                  // this.$emit('refreshDataList'，9999)    如第二个参数传了999，那父组件就会接收到的参数是999
                }
              })
            }
          })
      }
      
      
      
11.layout="total, sizes, prev, pager, next, jumper"
total：共有多少条记录 是选择一页几条 向前选择 页数 向后选择 前往x页
使用了size-change和current-change事件来处理页码大小和当前页变动时候
触发的事件。page-sizes接受一个整型数组，数组元素为展示的选择
每页显示个数的选项，[100, 200, 300, 400]表示四个选项，
每页显示 100 个，200 个，300 个或者 400 个。

12.type=text说明input框能输入字符串类型的文本，一般type默认就是text，text类型的可以输入任何字符

13、v-if="isAuth

Vue自定义权限指令v-auth实现按钮权限控制

14.vue之element-ui中的 <template slot-scope="scope">

 

 

15、<el-pagination

@size-change="sizeChangeHandle"

使用了size-change事件来处理页码大小

@current-change="currentChangeHandle"

使用了current-change事件来处理当前页变动时候触发的事件

:page-sizes="[10, 20, 50, 100]"

page-sizes接受一个整型数组，数组元素为展示的选择每页显示个数的选项，[100, 200, 300, 400]表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。