稿子：
大家好，我是青豆恩，今天我给大家讲解一下前端
vue做增删改查。它使用到的技术栈是vue+element+es6
我们先来看一下页面，点击查询可以查询到想要的信息
点击新增会有一个弹出框，点击修改也是，点击查看就会
有一个不可编辑的弹出框。点击删除可以删除一条信息。
我们使用的编辑器是vscode，文件代码分为三部分。
<template></template>
<script>
export default{
}
</script>
我们重点关注<template>（html）部分和js部分
import是引入对象，export暴露自身vue示例对象主要代码写在
export default的暴露对象下
好，我们先来写一下这个静态页面
先写这个输入框，查询按钮、新增按钮、批量删除
然后写表格（作物名/排序号/操作（查看，修改，删除））
然后写那个脚标 页面
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</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 个。
然后在data里声明一下
data () {
return {
searchForm: {
name: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0
}
},
这里的pageIndex: 1,是一进入页面默认在第一页
pageSize: 10,是默认一页显示10条
totalPage: 0,初始化时候已经填写的信息为0条
现在我们要让每页数和当前页成动态
// 每页数
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
},
@select-change是element封装的复选框选择事件，
selectChangeHandle是你自己自定义的方法名称，
用来接收change事件，val这个参数是element组件抛出来给你的
把val赋值给。
然后获取到后台数据
// 获取数据列表
getDataList () {
this.$http({
url: '/pesticide/crop/list',
method: 'get',
params: {
'page': this.pageIndex,
'limit': this.pageSize,
'name': this.searchForm.name
}
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.page.records
this.totalPage = data.page.total
} else {
this.dataList = []
this.totalPage = 0
}
})
},
这时候点击事件的时候页面就会重新获取数据了
我们首先先写新增的功能
点击新增会有一个弹窗，这个弹窗涉及到页面的转换
同时删除和查看也会有弹窗
首先我们需要引入el-dialog这个组件
根据具体的路径完成一个组件页面的引入，并且取名为AddOrUpdate,然后根据规则定义一个组件，按照驼峰的形势AddOrUpdate转换成组件的名字。
import AddOrUpdate from './crop-add-or-update'
在components里注册声明这个组件
components: {
AddOrUpdate
},
在template标签里面添加一个组件
为了是这个页面的组件能够成功显示我们需要使用v-if，如果是v-if的结果是false的话，这个组件就不会显示。
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
当然为了实现这个功能，我们需要先给定一个默认值
addOrUpdateVisible: false
data () {
return {
searchForm: {
name: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
addOrUpdateVisible: false
}
},
然后我们完成触发的方法，
<el-button type="primary" @click="addOrUpdateHandle()" size="small">新建</el-button>
删除 ：
<el-button v-if="isAuth('pesticide:crop:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
查看：
<el-button v-if="isAuth('pesticide:crop:info')" type="text" size="small" @click="showDetails(scope.row.id)">查看</el-button>
完成新建的按钮,想要弹窗显示的时候将dialog的v-if设置为true即可，即addOrUpdateVisible设置为true，this.$nextTick(()这是Vue生命周期中的钩子函数的其中之一，在显示的时候加以操作，然后就是this.$refs.addOrUpdate.init(id)使用this.$refs.组件名.组件方法(参数)，组件名称是在设定的时候通过ref="addOrUpdate"设定组件的名称变成refs的直接使用。
addOrUpdateHandle( id) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id )
})
}
showDetails (id) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id, true)
})
},
然后我们在组件里面，组件中的主体是在<el-dialog :visible.sync="dialogFormVisible" :title="title">里面的，通过:visible.sync="dialogFormVisible"绑定一个boolean值来完成对于dialog的显示，然后:title="title"完成对于弹窗的题目的设定
这里是一个三目运算方法
什么是三目运算：(布尔表达式 ? 值0:值1;)
<el-dialog
:title="!dataForm.id ? '新增' : !disabled ? '修改' : '查看'"
:close-on-click-modal="false"
:visible.sync="visible">
</el-dialog>
调用init方法时候，把visible=true打开，this…填写信息后重置表单，防止有之前填的信息残留
init (id, disabled) {
this.dataForm.id = ''
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
})
},
然后我们写表单里的内容
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
<el-form-item label="作物名" prop="cropName">
<el-input v-model="dataForm.cropName" :disabled="disabled" placeholder="作物名"></el-input>
</el-form-item>
<el-form-item label="排序号" prop="orderNum">
<el-input v-model="dataForm.orderNum" :disabled="disabled" placeholder="排序号"></el-input>
</el-form-item>
</el-form>
然后通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参
Slot的通俗理解
是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中<slot>位置）
Disabled这里是查看的功能的。如果是查看，这个按钮就不显示。
点击取消之后这个按钮消失
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button v-if="!disabled" type="primary" @click="dataFormSubmit()">确定</el-button>
</span>
然后在<script>的data里加上
新建和编辑使用同一个页面，常常需要初始化data数据。
data () {
return {
disabled: false,
visible: false,
dataForm: {
id: 0,
cropName: '',
orderNum: ''},
dataRule: {
cropName: [
{required: true, message: '名称不能为空', trigger: 'blur'}
]
}
}
},
然后我们开始写dataFormSubmit方法
页面加载后对表单进行验证 $("#表单id名").validate({}) 然后我们在表单里写一些校验，并且在data中写datarule
<el-form :rules="dataRule" >
// 表单提交
dataFormSubmit () {
this.$refs['dataForm']
.validate((valid) => {
// valid为true说明校验通过
if (valid) {
this.$http({
//这里又是一个三目表达式，如果是新增，就进入save这个方法，如果为修改，就进入uodate这个方法，这是后台用来区分是新增的还是编辑的。
Save和update是后台传的字段
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
})
//我们完成数据库的新增以后的操作，将dialog显示为false，使用this.$emit('refreshDataList')返回之前的页面，我们之前在父组件中也定义了这个@refreshDataList="getDataList"
this.visible = false
this.$emit('refreshDataList')
}
})
}
})
}
修改功能：
通过有没有传id值来判断
:title="!dataForm.id ? '新增' : !disabled ? '修改' : '查看'"
如果有值的话就进入
init (id, disabled) {
this.disabled = disabled
this.dataForm.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
}
})
}
})
},
查看功能
因为传了一个true
// 查看详情
showDetails (id) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id, true)
})
},
在data里先把disabled:false打开
data () {
return {
disabled: false,
visible: false,
dataForm: {
id: 0,
cropName: '',
orderNum: ''},
}
},
init (id, disabled) {
this.disabled = disabled
this.dataForm.id = id || ''
然后再在表单里加不可编辑的状态
<el-form-item label="作物名" prop="cropName">
<el-input v-model="dataForm.cropName" :disabled="disabled" placeholder="作物名"></el-input>
</el-form-item>
<el-form-item label="排序号" prop="orderNum">
<el-input v-model="dataForm.orderNum" :disabled="disabled" placeholder="排序号"></el-input>
</el-form-item>
删除
<el-button v-if="isAuth('pesticide:crop:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item>
<el-button v-if="isAuth('pesticide:crop:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
deleteHandle (id) {
//Id有值就放进一个数组里，否则就抽取选中复选框的数组里的id，这个map循环最终返回来的还是数组的格式
let ids = id ? [id] : this.dataListSelections.map(item => {
return item.id
})
//如果点确定，就执行if方法，如果点取消，就什么也不执行
this.$confirm('确定对所选项进行[删除]操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: '/pesticide/crop/delete',
method: 'post',
data: ids
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500
})
this.getDataList()
}
})
}).catch(() => {
})
}
}
}
最后一个写查询
<el-form-item>
<el-input v-model="searchForm.name" placeholder="请输入作物名" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">查询</el-button>
data () {
return {
searchForm: {
name: ''
},