Vue數(shù)據(jù)表格增刪改查與表單驗證代碼詳解
更新時間：2023年10月20日 09:17:17 作者：云村小威
這篇文章主要給大家介紹了關(guān)于Vue數(shù)據(jù)表格增刪改查與表單驗證的相關(guān)資料,Vue可以通過使用組件化的方式來實現(xiàn)表格的增刪改查功能,文中通過圖文以及代碼介紹的非常詳細,需要的朋友可以參考下
一、CRUD實現(xiàn)
1.1 后臺CRUD編寫
package com.ycxw.ssm.controller;
@Controller
@RequestMapping("/book")
public class BookController {
@Autowired
private IBookService bookService;
@RequestMapping("/addBook")
@ResponseBody
public JsonResponseBody<?> addBook(Book book){
try {
bookService.insert(book);
return new JsonResponseBody<>("新增書本成功",true,0,null);
} catch (Exception e) {
e.printStackTrace();
return new JsonResponseBody<>("新增書本失敗",false,0,null);
}
}
@RequestMapping("/editBook")
@ResponseBody
public JsonResponseBody<?> editBook(Book book){
try {
bookService.updateByPrimaryKey(book);
return new JsonResponseBody<>("編輯書本成功",true,0,null);
} catch (Exception e) {
e.printStackTrace();
return new JsonResponseBody<>("編輯書本失敗",false,0,null);
}
}
@RequestMapping("/delBook")
@ResponseBody
public JsonResponseBody<?> delBook(Book book){
try {
bookService.deleteByPrimaryKey(book.getId());
return new JsonResponseBody<>("刪除書本成功",true,0,null);
} catch (Exception e) {
e.printStackTrace();
return new JsonResponseBody<>("刪除書本失敗",false,0,null);
}
}
@RequestMapping("/queryBookPager")
@ResponseBody
public JsonResponseBody<List<Book>> queryBookPager(Book book, HttpServletRequest req){
try {
PageBean pageBean=new PageBean();
pageBean.setRequest(req);
List<Book> books = bookService.queryBookPager(book, pageBean);
return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books);
} catch (Exception e) {
e.printStackTrace();
return new JsonResponseBody<>("分頁查詢書本失敗",false,0,null);
}
}
}1.2 配置訪問路徑
src/api/action.js :
//獲取書本信息 'BOOKMSG_BOOKINFO_REQ': '/book/queryBookPager', //新增書本 'BOOK_ADD': '/book/addBook', //修改書本 'BOOK_EDIT': '/book/editBook', //刪除書本 'BOOK_DEL': '/book/delBook',
1.3 前端編寫（及窗口）
<template>
<div class="Book" style="padding: 30px;">
<!-- 輸入框搜索 -->
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="書籍名稱 : ">
<el-input v-model="bookname" placeholder="書籍名稱"></el-input>
</el-form-item>
<el-form-item>
<el-button type="warning" @click="onSubmit()">查詢</el-button>
<el-button type="warning" icon="el-icon-plus" @click="addBook()">新增</el-button>
</el-form-item>
</el-form>
<!-- 書籍的書籍表格 -->
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="書籍ID"></el-table-column>
<el-table-column prop="bookname" label="書籍名稱"></el-table-column>
<el-table-column prop="price" label="書籍價格"></el-table-column>
<el-table-column prop="booktype" label="書籍類型"></el-table-column>
<!-- “編輯”“刪除”功能連接 -->
<el-table-column label="操作">
<!--
在<template>上使用特殊的slot-scope 特性，可以接收傳遞給插槽的prop
slot-scope:類似將每一行的row對象封裝到槽中，之后直接從scope中獲取
row對象信息和行索引index信息即可
-->
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.row)">編輯</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">刪除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分頁 -->
<div class="block" style="padding: 20px;">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
background :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
<!--
彈出窗口：增加和修改書本信息共用一個彈出窗口，需要根據(jù)用戶的選擇動態(tài)的設(shè)置彈出窗口的標題
:tile 通過綁定值的方式設(shè)置dialog的標題
:visible.sync 控制彈出窗口的顯示或隱藏，.sync同步修飾符
@close="closeBookForm"，設(shè)置窗口關(guān)閉時調(diào)用的處理函數(shù)，可用于清空表單
:model="bookForm"：用于定義表單對應(yīng)的model，具體model的定義可見data部分。
v-show="optiontype == 'update'" 通過操作類型控制是否顯示書本編號字段，如果當前操作類型為
新增，則不用顯示，書本編號在數(shù)據(jù)表中是自增的。
:label-width="formLabelWidth" 統(tǒng)一定義標簽的寬度。
:style="{width: formEleWidth}" 統(tǒng)一定義form元素的寬度。
-->
<el-dialog :title="dialogName" :visible.sync="dialogFormVisible" @close="closeBookForm" width="500px">
<el-form :model="bookForm" :rules="rules" ref="bookForm" :label-position="center">
<el-form-item v-show="optiontype == 'update'" label="編號" :label-width="formLabelWidth">
<el-input v-model="bookForm.id" autocomplete="off" :style="{width: formEleWidth}"></el-input>
</el-form-item>
<el-form-item label="書名" :label-width="formLabelWidth" prop="bookname">
<el-input v-model="bookForm.bookname" autocomplete="off" :style="{width: formEleWidth}"></el-input>
</el-form-item>
<el-form-item label="價格" :label-width="formLabelWidth" prop="price">
<el-input v-model="bookForm.price" autocomplete="off" :style="{width: formEleWidth}"></el-input>
</el-form-item>
<el-form-item label="類型" :label-width="formLabelWidth" prop="booktype">
<el-select v-model="bookForm.booktype" placeholder="選擇類型" :style="{width:formEleWidth}">
<el-option label="名著" value="mz"></el-option>
<el-option label="小說" value="xs"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="saveBook()">確 定</el-button>
</div>
</el-dialog>
</div>
</template>注1：隱藏顯示設(shè)置，通過Vue實例對象中的dialogFormVisible="true|false"來控制dialog顯示隱藏
:visible.sync="dialogFormVisible"
注2：通過close或closed事件，在關(guān)閉dialog彈出框時清空form表單數(shù)據(jù)和驗證信息；
@close="dialogClose"
1.4 增刪改查實現(xiàn)
<script>
export default {
name: 'BookList',
data() {
return {
bookname: '',
tableData: [],
rows: 10,
total: 0,
page: 1,
//控制對話框是否顯示，默認是隱藏狀態(tài)
dialogFormVisible: false,
//統(tǒng)一控制標簽的寬度
formLabelWidth: '40px',
//統(tǒng)一控制表單元素的寬度
formEleWidth: '400px',
//對話框標題，默認為新增，如果是點擊修改按鈕打開對話框，則標題應(yīng)為修改。
dialogName: '新增書本',
//操作類型，默認為添加，如果是點擊修改打開對話框，則操作類類型應(yīng)變?yōu)樾薷?
//該變量用于控制是否顯示書本編號字段，當操作類型為新增時不需顯示（書本編號數(shù)據(jù)表字段為自增）
//當操作類型為修改時，需要顯示。
optiontype: 'add',
//定義表單對應(yīng)的model
bookForm: {
id: '',
bookname: '',
price: null,
booktype: ''
}
}
},
methods: {
//選擇分頁
handleSizeChange(r) {
//當頁大小發(fā)生變化
let params = {
bookname: this.bookname,
rows: r,
page: this.page
}
this.query(params);
},
//輸入分頁
handleCurrentChange(p) {
//當前頁碼大小發(fā)生變化
let params = {
bookname: this.bookname,
rows: this.rows,
// 分頁
page: p
}
this.query(params);
},
//查詢方法
query(params) {
//獲取后臺請求書籍數(shù)據(jù)的地址
let url = this.axios.urls.BOOKMSG_BOOKINFO_REQ;
this.axios.get(url, {
params: params
}).then(d => {
this.tableData = d.data.rows;
this.total = d.data.total;
}).catch(e => {});
},
onSubmit() {
let params = {
bookname: this.bookname
}
console.log(params)
this.query(params);
this.bookname = ''
},
//當關(guān)閉對話框時，該方法用于清空表單
closeBookForm() {
this.bookForm.id = null;
this.bookForm.bookname = null;
this.bookForm.booktype = null;
this.bookForm.price = null;
},
//打開對話框，將對話框標題設(shè)置為新增，操作類型設(shè)置為'add'
addBook() {
this.dialogName = '新增書本信息';
this.dialogFormVisible = true;
this.optiontype = 'add';
},
//打開對話框，將對話框標題設(shè)置為修改，操作類型設(shè)置為'update'，
//并使用獲取的待修改的記錄的值設(shè)置對應(yīng)的表單元素
handleEdit(row) {
this.dialogName = '編輯書本信息';
this.dialogFormVisible = true;
this.bookForm.id = row.id;
this.bookForm.bookname = row.bookname;
this.bookForm.booktype = row.booktype;
this.bookForm.price = row.price;
this.optiontype = 'update';
},
/* 新增書本 */
saveBook() {
//默認新增
var url = this.axios.urls.BOOK_ADD;
if (this.optiontype == 'update') {
url = this.axios.urls.BOOK_EDIT;
}
console.log(url)
this.axios.post(url, this.bookForm).then(d => {
//關(guān)閉窗口
this.closeBookForm();
this.dialogFormVisible = false;
this.query({});
}).catch();
},
//刪除書本記錄
handleDelete(row) {
this.$confirm('此操作將永久刪除該文件, 是否繼續(xù)?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//獲取刪除書本訪問路徑
var url = this.axios.urls.BOOK_DEL;
this.axios.post(url, {
id: row.id
}).then(r => {
this.$message({
type: 'success',
message: '刪除成功!'
});
this.query({});
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消刪除'
});
});
}
},
created() {
this.query({})
}
}
</script>1.4.1 新增示例
1.4.2 修改示例
1.4.3 刪除示例
二、表單驗證
2.1 設(shè)置表單驗證屬性
Form 組件提供了表單驗證的功能，只需要通過 rules 屬性傳入約定的驗證規(guī)則，并將 Form-Item 的 prop 屬性設(shè)置為需校驗的字段名即可。校驗規(guī)則參見 async-validator
2.2 自定義驗證規(guī)則
自定義驗證規(guī)則，在data對象，return之前定義。定義完成后可在rules中使用，如下代碼所示。
注意：
最后return時調(diào)用的callback，如果不調(diào)用則驗證。
//定義驗證規(guī)則
rules: {
bookname: [{
//是否必填
required: true,
//提示信息
message: '請輸入書籍名稱',
//事件
trigger: 'blur'
},
{
min: 3,
max: 5,
message: '長度在 3 到 5 個字符',
trigger: 'blur'
}
],
price: [{
required: true,
//自定義規(guī)則
validator: checkPrice,
trigger: 'blur'
}],
booktype: [{
required: true,
message: '請選擇類型',
trigger: 'change'
}]
}2.3 使用規(guī)則
注意：
表單重置時必須先清空表單驗證信息，再清空表單數(shù)據(jù)信息，通過form表單的ref屬性來清空表單驗證信息
this.$refs['bookForm'].resetFields();語法：
this.$refs['需要驗證的表單名稱'].validate((valid) => { if (valid) { //驗證通過 alert('submit!'); } else { //驗證失敗 console.log('error submit!!'); return false; } });
/* 新增書本 */
saveBook() {
this.$refs['bookForm'].validate((valid) => {
if (valid) {
//默認新增
var url = this.axios.urls.BOOK_ADD;
if (this.optiontype == 'update') {
url = this.axios.urls.BOOK_EDIT;
}
console.log(url)
this.axios.post(url, this.bookForm).then(d => {
//關(guān)閉窗口
this.closeBookForm();
this.dialogFormVisible = false;
this.query({});
}).catch();
} else {
console.log('error submit!!');
return false;
}
});
},2.4 效果演示
總結(jié)
到此這篇關(guān)于Vue數(shù)據(jù)表格增刪改查與表單驗證的文章就介紹到這了,更多相關(guān)Vue增刪改查與表單驗證內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue彈窗組件的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
vue如何實現(xiàn)動態(tài)改變地址欄的參數(shù)值
這篇文章主要介紹了vue如何實現(xiàn)動態(tài)改變地址欄的參數(shù)值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)多條件和模糊搜索功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
Vue2使用TailwindCSS方法及遇到問題小結(jié)
Tailwind CSS是一個全新的、可定制的CSS框架,它提供了一系列的CSS類,用于構(gòu)建現(xiàn)代化的Web界面,這篇文章主要介紹了Vue2使用TailwindCSS方法及遇到問題小結(jié),需要的朋友可以參考下2024-03-03
在前端開發(fā)中,我們時常需要處理文件上傳和下載的功能,本文主要和大家分享一下如何使用Vue3和JSZip庫在瀏覽器端實現(xiàn)zip文件壓縮,需要的可以參考下2024-05-05
vue使用showdown并實現(xiàn)代碼區(qū)域高亮的示例代碼
這篇文章主要介紹了vue使用showdown并實現(xiàn)代碼區(qū)域高亮的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了element-ui滾動條el-scrollbar置底方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue實現(xiàn)將數(shù)據(jù)存入vuex中以及從vuex中取出數(shù)據(jù)
今天小編就為大家分享一篇vue實現(xiàn)將數(shù)據(jù)存入vuex中以及從vuex中取出數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在本篇內(nèi)容里小編給大家分享的是關(guān)于vue登錄注冊的相關(guān)實例內(nèi)容以及寫法分析，有需要朋友們可以學(xué)習(xí)下。2019-09-09
vue-cli使用stimulsoft.reports.js的詳細教程
Stimulsoft?Reports.JS是一個使用JavaScript和HTML5生成報表的平臺。它擁有所有擁來設(shè)計，編輯和查看報表的必需組件。該報表工具根據(jù)開發(fā)人員數(shù)量授權(quán)而不是根據(jù)應(yīng)用程序的用戶數(shù)量。接下來通過本文給大家介紹vue-cli使用stimulsoft.reports.js的方法，一起看看吧2021-12-12