vue增删改查
大家好，我是青豆恩，今天我给大家讲解一下前端
vue做增删改查。它使用到的技术栈是vue+element+es6
我们先来看一下页面，点击查询可以查询到想要的信息
点击新增会有一个弹出框，点击修改也是，点击查看就会
有一个不可编辑的弹出框。点击删除可以删除一条信息。
我们使用的编辑器是vscode，文件代码分为三部分。
我们重点关注（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;)
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
这个您看上面的
还是查看，然后也只有查看传了一个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中的
15、 @size-change="sizeChangeHandle" 使用了 @current-change="currentChangeHandle" 使用了 :page-sizes="[10, 20, 50, 100]"size-change事件来处理页码大小current-change事件来处理当前页变动时候触发的事件page-sizes接受一个整型数组，数组元素为展示的选择每页显示个数的选项，[100, 200, 300, 400]表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。