vueElement UI 修改与增加与删除与模糊查询

最新推荐文章于 2023-04-04 00:47:45 发布

张毫洁

最新推荐文章于 2023-04-04 00:47:45 发布

阅读量236

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_47615289/article/details/118813287

版权

笔记专栏收录该内容

60 篇文章 1 订阅

订阅专栏

本文详细展示了Vue.js组件中数据的管理，包括数据初始化、页面分页、表单验证及后端接口调用。通过示例代码，解释了如何处理学生信息的增删改查操作，涉及日期选择、班级输入、系别验证等功能，并实现了模糊查询功能。

摘要由CSDN通过智能技术生成

export default {
data() {
return {
totalshuju: null, // 总条数
pagesize: 1, // 每页的显示条数
currentPage: 1, // 当前页码
totalpage: null, // 共有多少页
dialogStatus: null,
tableData: null,
dialogFormVisible: false,
sStudentName: ‘’,
form: {
name: null,
rxsj: null,
xb: null,
xskh: null,
zy: null,
bj: null,
distribution: true,
gradeId: null,
gradeName: null,
id: null
},
rules: {
name: [
{ required: true, message: ‘请输入学生姓名’, trigger: ‘blur’ },
{ min: 3, max: 10, message: ‘长度在 3 到 10 个字符’, trigger: ‘blur’ }
],
rxsj: [
{ required: true, message: ‘请选择日期’, trigger: ‘change’ }
],
bj: [
{ required: true, message: ‘请输入班级名’, trigger: ‘blur’ }
],
xb: [
{ required: true, message: ‘请输入系别’, trigger: ‘blur’ }
],
xskh: [
{
validator: (rule, xskh, callback) => {
if (/¹[0-9]{8} $KaTeX parse error: Expected 'EOF', got '}' at position 155: \dots } }̲, t\dots$ confirm(此操作将删除 ${name}, 是否继续?, ‘提示’, {
confirmButtonText: ‘确定’,
cancelButtonText: ‘取消’,
type: ‘warning’
})
},
handleDelete(row, index) { // 删除确定按钮
this.deleteID = row.id
console.log(this.deleteID)
this.DelConfirm(row.name).then(response => {
deleteTableshuju(this.deleteID).then(response => {
this. $KaTeX parse error: Expected 'EOF', got '}' at position 172: \dotstApi() }̲) }) \dots$ nextTick(() => {
this. $KaTeX parse error: Expected 'EOF', got '}' at position 39: \dotslidate() }̲) }, //\dots$ nextTick(() => {
this. $KaTeX parse error: Expected 'EOF', got '}' at position 39: \dotslidate() }̲) this.fo\dots$ refs[‘formRef’].validate((valid) => {
if (valid) {
// 修改=======================================================
this.getUpdateStudentApi(this.form)
this.dialogFormVisible = false
if (this.dialogStatus === ‘修改’) {
alert(‘提交了修改!’)
} else { alert(‘提交了新增!’) }
} else {
console.log(‘error 提交!!’)
return false
}
})
},
resetForm() {
this.dialogFormVisible = false
}
}
}

# 后端接口 import request from '@/utils/request'

export function getList(params) {
return request({
url: ‘/vue-admin-template/table/list’,
method: ‘get’,
params
})
}
export function updateTableshuju(data) {
console.log(‘js接收到的参数’, data)
return request({
url: ‘/cardservice/student/update/update’,
method: ‘post’,
data
})
}
export function deleteTableshuju(data) {
console.log(‘js接收到的参数’, data)
return request({
url: ‘/cardservice/student/update/delete/’ + data,
method: ‘delete’
})
}
export function studentNameMohu(name, page, size) {
console.log(‘模糊查询的参数’, name, page, size)
return request({
url: /cardservice/student/query/mohu?name=${name}&page=${page}&size=${size},
method: ‘get’
})
}