一、表单验证
在分页条下面放入编辑组件el-dialog:
<!-- 编辑界面-->
<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('editForm')">保存</el-button>
</div>
</el-dialog>
在script的date里面写入:
rules: {
title: [{
required: true,
message: '请输入文章标题',
trigger: 'blur' /* trigger:触发器 */ /*blur失去焦点的时候触发 */
},
{
/* 非空验证 */
min: 3,
max: 5,
message: '长度在 3 到 5 个字符',
trigger: 'blur'
}
],
body: [{
required: true,
message: '请输入文章内容',
trigger: 'change'
}]
}
写入新增方法:
handleEdit(){//新增
this.editFormVisible =true;
},
校验方法:
submitForm(formName) { //校验方法
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
二、增删改功能实现
先把之前注释了的操作按钮放开:
<el-table-column align=