标签：vue true 改查 disabled 组件 dataForm 增删 data id
稿子：
大家好，我是青豆恩，今天我给大家讲解一下前端
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: ''
},
标签：vue,true,改查,disabled,组件,dataForm,增删,data,id 来源： https://blog.csdn.net/weixin_49393290/article/details/120693693
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。