vue.js+Element如何實現表格里的增刪改查

這篇文章主要介紹了vue.js+Element如何實現表格里的增刪改查，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

新項目使用的是vue.js 后來發現餓了嗎前端編寫的一套框架Element （http://element.eleme.io/#/zh-CN）來配合vue.js進行樣式填充

之前用過angularjs 用到后來 發現越來越難學 于是就決定用vue.js

下面就介紹一下vue.js應用在表格里的增刪改查

首先引入一下element的js

<script src="plugins/element-ui/index.js"></script>

然后引入需要用到的vue相關的js文件

<script src="plugins/vue/vue.js"></script>
<script src="plugins/vue/vue-resource.js"></script>
<script src="plugins/vue/vue-moment.min.js"></script>
<script src="js/jquery.min.js"></script>

下面先說一下html文件

<div id="user">
 <!-- 操作 -->
 <ul class="btn-edit fr">
 <li >
 <el-button type="primary" @click="dialogCreateVisible = true">添加用戶</el-button>
 <el-button type="primary" icon="delete" :disabled="selected.length==0" @click="removeUsers()" >刪除</el-button>
 <el-button type="primary" icon="edit" :disabled="selected.length==0" >停用</el-button>
 <el-button type="primary" icon="edit" :disabled="selected.length==0" >激活</el-button>
 </li>
 </ul>
 <!-- 用戶列表-->
 <el-table :data="users"
 stripe
 v-loading="loading"
 element-loading-text="拼命加載中..."
 
 height="443"
 @sort-change="tableSortChange"
 @selection-change="tableSelectionChange">
 <el-table-column type="selection"
 width="60">
 </el-table-column>
 <el-table-column sortable="custom" prop="username"
 label="用戶名"
 width="120">
 </el-table-column>
 <el-table-column prop="name"
 label="姓名"
 width="120">
 </el-table-column>
 <el-table-column prop="phone"
 label="手機"
 >
 </el-table-column>
 <el-table-column prop="email"
 label="郵箱">
 </el-table-column>
 <el-table-column prop="create_time" sortable="custom" inline-template
 label="注冊日期"
 width="260">
 <div>{{ row.create_time | moment('YYYY年MM月DD日 HH:mm:ss')}}</div>
 </el-table-column>
 <el-table-column inline-template
 label="操作"
 width="250">
 <el-button type="primary" size="mini" @click="removeUser(row)">刪除</el-button>
 <el-button type="primary" size="mini" @click="setCurrent(row)">編輯</el-button>
 </el-table-column>
 </el-table>
 <!--分頁begin-->
 <el-pagination class="tc mg"
 :current-page="filter.page"
 :page-sizes="[10, 20, 50, 100]"
 :page-size="filter.per_page"
 layout="total, sizes, prev, pager, next, jumper"
 :total="total_rows"
 @size-change="pageSizeChange"
 @current-change="pageCurrentChange">
 </el-pagination>
 <!--分頁end-->
</div>

這一段是element的表單以及編輯還有分頁樣式 可以直接復制進來 其中添加了一些click操作 后面需要用到，然后我們就開始引入js

了解過vuejs的應該知道這樣的結構 data里面填寫我們獲取的數據 一些規則 定義一些變量

在methods進行我們的操作

 vm = new Vue({
 el: '#user',
 data:{},
 methods:{}
 })

首先 我們先從讀取數據開始

放入你的url

users是表格綁定的數組 也是存放從后臺獲取的數據

將需要顯示的數據放在filter中

vm = new Vue({
 el: '#user',
 // 數據模型
 data: function() {
 return {
 url: 'url',
 users: [],
 filter: {
 per_page: 10, // 頁大小
 page: 1, // 當前頁
 name:'',
 username:'',
 phone:'',
 is_active:'',
 sorts:''
 },
 total_rows: 0,
 loading: true,
 };
 },
 methods:{}
})

接下來我們添加methods

pageSizeChange() 以及 pageCurrentChange()是用于分頁的函數

在query() 是用于搜索的項目

getUsers() 就是用于獲取數據

methods: {
 pageSizeChange(val) {
 this.filter.per_page = val;
 this.getUsers();
 },
 pageCurrentChange(val) {
 this.filter.page = val;
 this.getUsers();
 },
 query(){
 this.filter.name='';
 this.filter.username='';
 this.filter.phone='';
 this.filter[this.select]=this.keywords;
 this.getUsers();
 },
 // 獲取用戶列表
 getUsers() {
 this.loading = true;

 var resource = this.$resource(this.url);
 resource.query(this.filter)
 .then((response) => {
 this.users = response.data.datas;
 this.total_rows = response.data.total_rows;
 this.loading = false;
 })
 .catch((response)=> {
 this.$message.error('錯了哦，這是一條錯誤消息');
 this.loading = false;
 });

 },
 }

讀取完數據之后 我們可以看見數據是按照每頁十條顯示 是上面我們默認設置的

下面進行刪除操作 刪除我設置的是單挑刪除以及多條刪除

因為刪除需要選中 所以我們需要加入選中的變量

vm = new Vue({
 el: '#user',
 // 數據模型
 data: function() {

 return {
 url: 'http://172.10.0.201/api/v1/accounts',
 users: [
 ],
 filter: {
 per_page: 10, // 頁大小
 page: 1, // 當前頁
 name:'',
 username:'',
 phone:'',
 is_active:'',
 sorts:''
 },
 total_rows: 0,
 loading: true,
 selected: [], //已選擇項
 };
 },

然后在methods也要加入選中的函數

 tableSelectionChange(val) {
 console.log(val);
 this.selected = val;
 },

// 刪除單個用戶

 removeUser(user) {
 this.$confirm('此操作將永久刪除用戶 ' + user.username + ', 是否繼續?', '提示', { type: 'warning' }) 
 .then(() => { // 向請求服務端刪除 
 var resource = this.$resource(this.url + "{/id}"); 
 resource.delete({ id: user.id }) 
 .then((response) => { 
 this.$message.success('成功刪除了用戶' + user.username + '!'); this.getUsers(); }) 
 .catch((response) => { 
 this.$message.error('刪除失敗!'); 
 }); 
 }) .catch(() => { 
 this.$message.info('已取消操作!');
 }); 
}, 
//刪除多個用戶 
removeUsers() { 
 this.$confirm('此操作將永久刪除 ' + this.selected.length + ' 個用戶, 是否繼續?', '提示', { type: 'warning' }) 
 .then(() => { 
 console.log(this.selected); 
 var ids = []; //提取選中項的id 
 $.each(this.selected,(i, user)=> { ids.push(user.id); }); // 向請求服務端刪除var resource = this.$resource(this.url);
 resource.remove({ids: ids.join(",") 
 }) .then((response) => { 
 .catch((response) => { 
 this.$message.error('刪除失敗!'); 
 }); 
 }) 
 .catch(() => { 
 }); 
}

接下來就進行到編輯和添加

由于刪除和編輯需要加入表單

<!-- 創建用戶 begin-->
 <el-dialog title="創建用戶" v-model="dialogCreateVisible" :close-on-click-modal="false" :close-on-press-escape="false" @close="reset" >
 <el-form id="#create" :model="create" :rules="rules" ref="create" label-width="100px">
 <el-form-item label="用戶名" prop="username">
 <el-input v-model="create.username"></el-input>
 </el-form-item>
 <el-form-item label="姓名" prop="name">
 <el-input v-model="create.name"></el-input>
 </el-form-item>
 <el-form-item label="密碼" prop="password">
 <el-input v-model="create.password" type="password" auto-complete="off"></el-input>
 </el-form-item>
 <el-form-item label="確認密碼" prop="checkpass">
 <el-input v-model="create.checkpass" type="password"></el-input>
 </el-form-item>
 <el-form-item label="電話" prop="phone">
 <el-input v-model="create.phone"></el-input>
 </el-form-item>
 <el-form-item label="郵箱" prop="email">
 <el-input v-model="create.email"></el-input>
 </el-form-item>
 <el-form-item label="是否啟用">
 <el-switch on-text="" off-text="" v-model="create.is_active"></el-switch>
 </el-form-item>
 </el-form>
 <div slot="footer" class="dialog-footer">
 <el-button @click="dialogCreateVisible = false">取 消</el-button>
 <el-button type="primary" :loading="createLoading" @click="createUser">確 定</el-button>
 </div>
 </el-dialog>
 <!-- 修改用戶 begin-->
 <el-dialog title="修改用戶信息" v-model="dialogUpdateVisible" :close-on-click-modal="false" :close-on-press-escape="false">
 <el-form id="#update" :model="update" :rules="updateRules" ref="update" label-width="100px">
 <el-form-item label="姓名" prop="name">
 <el-input v-model="update.name"></el-input>
 </el-form-item>
 <el-form-item label="電話" prop="phone">
 <el-input v-model="update.phone"></el-input>
 </el-form-item>
 <el-form-item label="郵箱" prop="email">
 <el-input v-model="update.email"></el-input>
 </el-form-item>
 <el-form-item label="是否啟用">
 <el-switch on-text="" off-text="" v-model="update.is_active"></el-switch>
 </el-form-item>
 </el-form>
 <div slot="footer" class="dialog-footer">
 <el-button @click="dialogUpdateVisible = false">取 消</el-button>
 <el-button type="primary" :loading="updateLoading" @click="updateUser">確 定</el-button>
 </div>
 </el-dialog>

因為有表單 所以我們需要加入表單驗證

以及添加和編輯彈出的狀態

vm = new Vue({
 el: '#user',
 // 數據模型
 data: function() {

 var validatePass = (rule, value, callback) => {
 if (value === '') {
 callback(new Error('請再次輸入密碼'));
 } else if (value !== this.create.password) {
 callback(new Error('兩次輸入密碼不一致!'));
 } else {
 callback();
 }
 };

 return {
 url: 'http://172.10.0.201/api/v1/accounts',
 users: [
 ],
 create: {
 id: '',
 username: '',
 name: '',
 password: '',
 checkpass: '',
 phone: '',
 email: '',
 is_active: true
 },
 currentId:'',
 update:{
 name: '',
 phone: '',
 email: '',
 is_active: true
 },
 rules: {
 name: [
 { required: true, message: '請輸入姓名', trigger: 'blur' },
 { min: 3, max: 15, message: '長度在 3 到 15 個字符'}
 ],
 username: [
 { required: true, message: '請輸入用戶名', trigger: 'blur' },
 { min: 3, max: 25, message: '長度在 3 到 25 個字符'},
 { pattern:/^[A-Za-z0-9]+$/, message: '用戶名只能為字母和數字'}
 ],
 password: [
 { required: true, message: '請輸入密碼', trigger: 'blur' },
 { min: 6, max: 25, message: '長度在 6 到 25 個字符'}
 ],
 checkpass: [
 { required: true, message: '請再次輸入密碼', trigger: 'blur' },
 { validator: validatePass}
 ],
 email: [
 { type: 'email', message: '郵箱格式不正確'}
 ],
 phone:[
 { pattern:/^1[34578]\d{9}$/, message: '請輸入中國國內的手機號碼'}
 ]
 },
 updateRules: {
 name: [
 { required: true, message: '請輸入姓名', trigger: 'blur' },
 { min: 3, max: 15, message: '長度在 3 到 15 個字符'}
 ],
 email: [
 { type: 'email', message: '郵箱格式不正確'}
 ],
 phone:[
 { pattern:/^1[34578]\d{9}$/, message: '請輸入中國國內的手機號碼'}
 ]
 },
 filter: {
 per_page: 10, // 頁大小
 page: 1, // 當前頁
 name:'',
 username:'',
 phone:'',
 is_active:'',
 sorts:''
 },
 total_rows: 0,
 loading: true,
 selected: [], //已選擇項
 dialogCreateVisible: false, //創建對話框的顯示狀態
 dialogUpdateVisible: false, //編輯對話框的顯示狀態
 createLoading: false,
 updateLoading: false,
 };
 },

下面就加入添加和編輯的函數

methods: {
 tableSelectionChange(val) {
 console.log(val);
 this.selected = val;
 },
 pageSizeChange(val) {
 console.log(`每頁 ${val} 條`);
 this.filter.per_page = val;
 this.getUsers();
 },
 pageCurrentChange(val) {
 console.log(`當前頁: ${val}`);
 this.filter.page = val;
 this.getUsers();
 },
 setCurrent(user){
 this.currentId=user.id;
 this.update.name=user.name;
 this.update.phone=user.phone;
 this.update.email=user.email;
 this.update.is_active=user.is_active;
 this.dialogUpdateVisible=true;
 },
 // 重置表單
 reset() {
 this.$refs.create.resetFields();
 },
 query(){
 this.filter.name='';
 this.filter.username='';
 this.filter.phone='';
 this.filter[this.select]=this.keywords;
 this.getUsers();
 },
 // 獲取用戶列表
 getUsers() {
 this.loading = true;

 var resource = this.$resource(this.url);
 resource.query(this.filter)
 .then((response) => {
 this.users = response.data.datas;
 this.total_rows = response.data.total_rows;
 this.loading = false;
 })
 .catch((response)=> {
 this.$message.error('錯了哦，這是一條錯誤消息');
 this.loading = false;
 });

 },

 // 創建用戶
 createUser() {
 // 主動校驗
 this.$refs.create.validate((valid) => {
 if (valid) {
 this.create.id=getuuid();
 this.createLoading=true;
 var resource = this.$resource(this.url);
 resource.save(this.create)
 .then((response) => {
 this.$message.success('創建用戶成功！');
 this.dialogCreateVisible=false;
 this.createLoading=false;
 this.reset();
 this.getUsers();
 })
 .catch((response) => {
 var data=response.data;
 if(data instanceof Array){
 this.$message.error(data[0]["message"]);
 }
 else if(data instanceof Object){
 this.$message.error(data["message"]);
 }
 this.createLoading=false;
 });
 } 
 else {
 //this.$message.error('存在輸入校驗錯誤!');
 return false;
 }
 });

 },

 // 更新用戶資料
 updateUser() {
 this.$refs.update.validate((valid) => {
 if (valid) {
 this.updateLoading=true;
 var actions = {
 update: {method: 'patch'}
 }
 var resource = this.$resource(this.url,{},actions);
 resource.update({"ids":this.currentId},this.update)
 .then((response) => {
 this.$message.success('修改用戶資料成功！');
 this.dialogUpdateVisible=false;
 this.updateLoading=false;
 //this.reset();
 this.getUsers();
 })
 .catch((response) => {
 var data=response.data;
 console.log(data);
 if(data instanceof Array){
 this.$message.error(data[0]["message"]);
 }
 else if(data instanceof Object){
 this.$message.error(data["message"]);
 }
 this.updateLoading=false;
 });
 } 
 else {
 //this.$message.error('存在輸入校驗錯誤!');
 return false;
 }
 });
 },

 // 刪除單個用戶
 removeUser(user) {
 this.$confirm('此操作將永久刪除用戶 ' + user.username + ', 是否繼續?', '提示', { type: 'warning' })
 .then(() => {
 // 向請求服務端刪除
 var resource = this.$resource(this.url + "{/id}");
 resource.delete({ id: user.id })
 .then((response) => {
 this.$message.success('成功刪除了用戶' + user.username + '!');
 this.getUsers();
 })
 .catch((response) => {
 this.$message.error('刪除失敗!');
 });
 })
 .catch(() => {
 this.$message.info('已取消操作!');
 });
 },

 //刪除多個用戶
 removeUsers() {
 this.$confirm('此操作將永久刪除 ' + this.selected.length + ' 個用戶, 是否繼續?', '提示', { type: 'warning' })
 .then(() => {
 console.log(this.selected);
 var ids = [];
 //提取選中項的id
 $.each(this.selected,(i, user)=> {
 ids.push(user.id);
 });
 // 向請求服務端刪除
 var resource = this.$resource(this.url);
 resource.remove({ids: ids.join(",") })
 .then((response) => {
 this.$message.success('刪除了' + this.selected.length + '個用戶!');
 this.getUsers();
 })
 .catch((response) => {
 this.$message.error('刪除失敗!');
 });
 })
 .catch(() => {
 this.$Message('已取消操作!');
 });
 }
 }

這就是整個增刪改查的過程

感謝你能夠認真閱讀完這篇文章，希望小編分享的“vue.js+Element如何實現表格里的增刪改查”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!