SPA项目开发之CRUD+表单验证
Form组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,
并将Form-Item的prop属性设置为需校验的字段名即可
<el-form-item label="活动名称" prop="name">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm"
注1:有多个表单,怎么在提交进行区分?
我们在rules这里写了对表单的验证规则,但是我们如何在methods里进行指定的表单进行认证,
所以我们一开始就在el-form里写了 ref="ruleForm",我们在methods里就可以用
注2:清空表单验证信息
this.$refs[formName].resetFields();
2. CUD
2.1 新增
2.2 添加修改/删除按钮
2.3 在<template>上使用特殊的slot-scope 特性,可以接收传递给插槽的prop
表单验证:
代码:
<template> <div> <!-- 搜索筛选 --> <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-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button> <el-button size="small" type="primary" icon="el-icon-plus" @click="add">添加</el-button> </el-form-item> </el-form> <!--列表--> <el-table size="small" :data="listData" border element-loading-text="拼命加载中" style="width: 100%;"> <el-table-column sortable prop="id" label="ID" min-width="300"> </el-table-column> <el-table-column sortable prop="title" label="文章标题" min-width="300"> </el-table-column> <el-table-column sortable prop="body" label="文章内容" min-width="300"> </el-table-column> <el-table-column align="center" label="操作" min-width="300"> <template slot-scope="scope"> <el-button size="mini" @click="edit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click="del(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> <!-- 分页条 --> <el-pagination style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="formInline.rows" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> <!-- 编辑界面 --> <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog"> <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">保存</el-button> </div> </el-dialog> </div> </template> <script> export default { data() { return { listData: [], formInline: { title: '', page: 1, rows: 10, }, total: 0, editFormVisible: false, title: '', editForm: { body: '', title: '', id: 0 }, rules: { title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }, ], body: [{ required: true, message: '请输入文章内容', trigger: 'blur' }, { min: 3, max: 5, message: '长度在3到5个字符', trigger: 'blur' } ] } }; }, methods: { search() { this.doSearch(this.formInline) }, doSearch(params) { let url = this.axios.urls.SYSTEM_ARTICLE_LIST; this.axios.post(url, params).then((response) => { this.listData = response.data.result; this.total = response.data.pageBean.total; console.log(response) }).catch((response) => { console.log(response) }); }, 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(); }, closeDialog() { this.editFormVisible = false; this.clearForm(); }, submitForm() { //用来提交新增/修改表单数据的,提交之前需要通过Vue实例中定义的表单填写规则 this.$refs['editForm'].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_EDIT; } this.axios.post(url,this.editForm).then((response) => { console.log(response); this.clearForm(); this.doSearch(this.formInline); }).catch((response) => { console.log(response); }); } else { console.log('error submit!!'); return false; } }); }, clearForm() { this.editForm.title = ''; this.editForm.body = ''; this.formInline.page = 1; this.formInline.rows = 10; this.editFormVisible=false; }, add() { this.title = '新增文章'; this.editFormVisible = true; }, edit(index, row) { this.title = '编辑文章'; //index代表的是操作数据在当前界面的行号 //row代表操作的当前数据,那也就意味着可以冲row中或所有数据库列段名 this.editForm.id = row.id; this.editForm.title = row.title; this.editForm.body = row.body; this.editFormVisible = true; }, del(index, row) { let url = this.axios.urls.SYSTEM_ARTICLE_DEL; this.axios.post(url, { id: row.id }).then((response) => { console.log(response); this.clearForm(); this.doSearch({}); }).catch((response) => { console.log(response); }); } }, created() { this.doSearch({}); } } </script> <style> </style>
效果: