SPA项目开发之CRUD+表单验证
和上一篇博客连在一起的：spa动态树和数据表格
1、表单验证
我这里用到是Dialog嵌套表单
在Articles.vue 中改动，
<!-- 搜索 -->
<el-form :inline="true" :model="formInline" class="user-search">
<el-form-item label="搜索：">
<el-input size="small" v-model="formInline.title" placeholder="输入文章标题"></el-input>
</el-form-item>
<el-form-item>
<el-table-column align="center" label="操作" min-width="2">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
<!-- 编辑界面 -->
<el-dialog :title="title" :visible.sync="editFormVisible" :before-close="handleClose" width="30%">
<el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
<el-form-item label="文章标题" prop="title">
<el-input size="small" v-model="editForm.title" auto-complete="off" placeholder="请输入文章标题"></el-input>
</el-form-item>
<el-form-item label="文章内容" prop="body">
<el-input size="small" v-model="editForm.body" auto-complete="off" placeholder="请输入文章内容"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="closeDialog">取消</el-button>
<el-button size="small" type="primary" class="title" @click="submitForm('editForm')">保存</el-button>
</div>
</el-dialog>
把对应的属性在script中定义，不然会报错
/* 表单验证 */
title: '', // 弹出层标题
editFormVisible: false, // 是否打开弹出层
editForm: {
id: 0,
title: '',
body: ''
},
rules: { // 校验规则
title: [{
required: true,
message: '请输入活动名称',
trigger: 'blur'
},
{
min: 3,
max: 10,
message: '长度在 3 到 10 个字符',
trigger: 'blur'
}
],
body: [{
required: true,
message: '请选择活动区域',
trigger: 'change'
}]
}
};
},
methods: {
closeDialog() { // 弹出层调用取消的方法
},
submitForm(formName) { // 提交表单
},
handleAdd() { // 新增
},
handleEdit(index, row) { // 编辑
},
deleteUser(index, row) { // 删除
},
clearData() { // 清楚弹出层表单数据
},
handleClose(done) { // 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。
}
},
点击上方增加：
Form组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，
并将Form-Item的prop属性设置为需校验的字段名即可
注意1：现在的正则是无效的，不满足条件也可以提交成功。需要加入：
(更多可以去elementUi官网查看)
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!'); // 满足正则条件
} else {
console.log('error submit!!'); // 不满足
return false;
}
});
}
2、CRUD（增，删，改）
下面完整js 代码，把上面定义的空方法补全
（里面有些方法和上一篇博客有关系）
<script>
export default {
data() {
return {
listData: [],
formInline: {
page: 1,
rows: 10,
title: ''
},
total: 0,
/* 表单验证 */
title: '', // 弹出层标题
editFormVisible: false, // 是否打开弹出层
editForm: {
id: 0,
title: '',
body: ''
},
rules: { // 校验规则
title: [{
required: true,
message: '请输入活动名称',
trigger: 'blur'
},
{
min: 3,
max: 10,
message: '长度在 3 到 10 个字符',
trigger: 'blur'
}
],
body: [{
required: true,
message: '请选择活动区域',
trigger: 'change'
}]
}
};
},
methods: {
handleSizeChange(rows) {
console.log("当前页大小：" + rows);
this.formInline.page = 1;
this.formInline.rows = rows;
this.search();
},
handleCurrentChange(page) {
console.log("当前页码：" + page);
this.formInline.page = page;
this.search();
},
search() {
this.doSearch(this.formInline);
},
// 查询也需要这个方法，定义通用
doSearch(params) {
let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
this.axios.post(url, this.formInline).then(response => {
// 获得后台传来的 result 数据
console.log(response);
//表格数据
this.listData = response.data.result;
// 符合查询最大页码数
this.total = response.data.pageBean.total;
}).catch(function(error) {
console.log(error);
});
},
closeDialog() { // 弹出层调用取消的方法
this.clearData();
},
submitForm(formName) { // 提交表单
this.$refs[formName].validate((valid) => {
if (valid) {
let url;
if (this.editForm.id == 0) {
// 增加
url = this.axios.urls.SYSTEM_ARTICLE_ADD;
} else {
// 修改
url = this.axios.urls.SYSTEM_ARTICLE_UPDATE;
}
this.axios.post(url, this.editForm).then(response => {
var code = response.data.code;
if (code == 1) {
this.$message({
message: response.data.msg,
type: 'success'
});
this.search(); // 重新刷新数据
this.clearData();// 关闭弹出层
} else {
this.$message({
message: response.data.msg,
type: 'warning'
});
}
}).catch(function(error) {
console.log(error);
});
} else {
console.log('error submit!!');
return false;
}
});
},
handleAdd() { // 新增
this.editFormVisible = true;
this.title = '新增数据';
},
handleEdit(index, row) { // 编辑
this.title = '修改数据';
this.editFormVisible = true;
// 给 表单赋值
this.editForm.id = row.id;
this.editForm.title = row.title;
this.editForm.body = row.body;
},
deleteUser(index, row) { // 删除
let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
this.axios.post(url, {
id: row.id
}).then(response => {
var code = response.data.code;
if (code == 1) {
this.$message({
message: response.data.msg,
type: 'success',
});
this.search(); // 重新刷新数据
this.clearData();
} else {
this.$message({
message: response.data.msg,
type: 'warning'
});
}
}).catch(function(error) {
console.log(error);
});
},
clearData() { // 清楚弹出层表单数据
this.title = '';
this.editForm.id = 0;
this.editForm.title = '';
this.editForm.body = '';
this.editFormVisible = false;
},
handleClose(done) { // 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。
this.title = '';
this.editForm.id = 0;
this.editForm.title = '';
this.editForm.body = '';
done();
}
},
// 钩子函数 页面加载会自动执行
created() {
this.doSearch({});
}
}
</script>
运行：
增加成功：
修改：
168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
