Vue+ElementUI纯前端技术实现对表格数据的增删改查
生活随笔
收集整理的這篇文章主要介紹了
Vue+ElementUI纯前端技术实现对表格数据的增删改查
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Vue+ElementUI純前端技術實現對表格數據的增刪改查
頁面展示效果
一、頁面結構
分為三個部分 head body 以及script
一般我個人是在head中引入一些組件庫 , 還有一些樣式 ; style 也可以定義在其中, 通過id選擇器 ,還有類選擇器進行 定義
script 標簽體中引入的是一些常見的組件庫
LIink 標簽體中引入的是一些CSS樣式
body中一般是書寫頁面的結構 , 也就是定義一個DIV , 然后在其中書寫書寫頁面中的各種元素
最后就是script 這里首先通過ID選中DIV , new Vue({ }); 通過el 選中id , data 中書寫需要的數據 , methods 里面書寫函數方法 , 也就是各種事件
下面是一些簡單的html結構 :
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--這是引入的組件庫--><script src="js/vue.js"></script><!--這是引入的樣式--><link rel="stylesheet" href="fonts/element-icons.ttf"></head> <body><!--這里一般書寫頁面的結構--> <div id="app"><h1>我是首頁中的標題</h1><button @click="dianji">點點我</button> </div> </body><script>new Vue({el:"#app",data:{},methods:{dianji:function (index) {alert('如果不是為了裝逼 ,那么一切將毫無意義!');}}}); </script> </html>二、涉及到的技術知識
1、頁面布局
<div id="one" align="center"> </div>2、導航菜單
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" align="center">//這是子菜單選項 <el-menu-item index="1"><font color="#000000">首頁</font></el-menu-item> </el-menu>3、表單
<el-form align="center"> </el-form>4、Button按鈕
<el-button type="primary" @click.native.prevent="update" :loading="addLoading">確定</el-button>5、Pagination分頁
<el-pagination layout="prev,pager,next" :total="50"> </el-pagination>6、彈框
<el-dialog title="編輯" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" append-to-body="true"></el-dialog>7、V-model 展示數據
<el-input v-model="form.id" autocomplete="off"></el-input>8、表格中展示數據
table 中展示的數組中的整體數據 用的是:data
column展示的每一個集合中某一點屬性 用的是prop
<el-table :data="newsList" style="width:100%" align="center"><el-table-column prop="id" label="公司代號" width="180"></el-table-column> </el-table>9、最難點
按鈕的功能是最難實現的部分 , 就是一些事件執行的函數功能 , 也就是一些算法 ;
這一部分在第五大項集中進行講解
三 、如何去書寫一個頁面結構
首先 , 最外層肯定是一個DIV , 然后DIV中去書寫一個el -form , 然后用el-row去分很多行 , 每一行中去書寫自己需要的內容 ,可以是圖片 , 也可以是按鈕 , 也可以是一段文字 ,然后呢書寫結構以后 ,樣式 事件 , 都是在標簽體中去進行定義 ;
四、易錯點
1、首先必須引入組件庫 , 以及常用的樣式
你創建一個文件夾 ,然后把這些 后綴名為js css的文件給導入進去
2、你的html頁面必須直接創建在根目錄文件下 ,不要自己手動創建一個文件夾 ,然后在里面進行書寫 ,不然你的組建組不起作用
3、彈框也是非常的費勁
五、難點
最難的點永遠都是算法的知識 , 這一部分知識 你會就是會 ,不會給你再多時間也沒用 , 就是增加、刪除、修改、查詢幾個按鈕功能的實現
1、彈框部分
1.1 這一段是就是 ,就是你執行按鈕操作之前出現的提示信息 , 就是相當于詢問你是否確定這樣做
記住關鍵字this.$confirm就行,格式自己復制粘貼就行
this.$confirm('確認進行添加','是否繼續?','提示',{confirmButtonText:'確定',confirmButtonText:'取消', }1.2 下面這一段是操作完成之后的提示信息 ; 提示你是執行成功了還是沒有
記住關鍵字this.$message就行 ,格式自己復制粘貼就行
this.$message({type: 'success',message:'添加成功', })1.3 這是編輯的彈框部分
<el-dialog title="編輯" :visible.sync="dialogFormVisible" width="30%" :before-close="handleClose" append-to-body="true"><!--這就是一個表格--><el-form :model="form" ><!--公司ID--><el-form-item label="公司ID"><el-input v-model="form.id" autocomplete="off"></el-input></el-form-item><!--公司名稱--><el-form-item label="公司名稱"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><!--公司地址--><el-form-item label="公司地址"><el-input v-model="form.adress" autocomplete="off"></el-input></el-form-item></el-form><!--確定, 取消 按鈕--><div><el-button type="primary" @click.native.prevent="editSubForm" :loading="addLoading">確定</el-button><el-button @click.native.prevent="dialogFormVisible=false">取消</el-button></div> </el-dialog>2、方法執行流程
adddetail:function(){最開始執行的部分 ,一般書寫this.$confirm以及你要執行的函數功能!}).then(()=>{接下來執行的部分一般書寫的this.$message也就是執行是否成功的提示信息!})}).catch((err)=>{這是出錯時候需要執行的部分一般也是取消執行出現的彈窗信息 })})},3、增加數據的實現過程解讀
這段代表向newList這個數組中添加元素
newList是我們寫死的數據 , addDetail是我們定義的一個空數組 , 然后輸入的ID對應于ID ,其余同理 , 添加到寫死的數組中, 這樣數據就展示出來了 ;
this.newsList.push({id:this.addDetail.id,name:this.addDetail.name,adress:this.addDetail.adress, }),4、刪除數據的實現過程解讀
只用一行就代碼就實現了刪除 this.newsList.splice(index,1)
index代表的是當前位置所處的索引 , 1 代表刪除一條數據 ,合起來也就是刪除一條數據
splice是js中刪除數組中元素的方法 ;
this.newsList.splice(index,1) this.$message({type: 'success',message:'刪除成功', })5、編輯數據的實現過程解讀
首先當你點擊編輯按鈕的時候 , 會彈出一個彈框 , 獲取的是當前你點擊按鈕的那行數據并進行展示 , 你可以對他進行修改 , 然后點擊保存數據數據就會發生改變
所以我們必須先進行一個綁定一個點擊事件 , 當你點擊編輯按鈕的時候彈框就出現
這里邊有一個屬性 :visible.sync=“dialogFormVisible” 我們對其進行賦值為false 意思是平常不顯示 ,
當觸發修改的點擊事件的石頭 , 我們就將這個變量變為true 意思是顯示出來
<el-dialog title="編輯" :visible.sync="dialogFormVisible" width="30%" :before-close="handleClose" append-to-body="true">修改的方法
首先我們根據索引 , 獲取當前的這條數據 ,
this.form=JSON.parse(JSON.stringify(this.newsList))[index];可以理解為用來拷貝數據的editdetail:function (index,rows) {this.dialogFormVisible=truethis.selected=index;this.form=JSON.parse(JSON.stringify(this.newsList))[index];},保存修改的方法
Vue.set(this.newsList,this.selected,this.form); 這個是用來賦值用的this.getShowData(this.newsList); 這個是我們書寫的一個展示數據的方法this.dialogFormVisible=false; 再次讓彈窗進行隱藏editSubForm:function(){Vue.set(this.newsList,this.selected,this.form);this.getShowData(this.newsList);this.dialogFormVisible=false; },展示數據的方法
/*獲取需要渲染到頁面中的數據*/ getShowData:function (arr) {this.clonenewsList=JSON.parse(JSON.stringify(arr)); },6、查詢數據的解讀過程
查詢完成以后展示數據即可
對需要進行查詢的數據書寫一個自己自定義的查詢條件
searchFn:function (e) { var key=e.target.value;/*查詢公司ID*/ if(key){var serchArray=[];this.newsList.forEach(function (item) {if(item.id.indexOf(key)>-1){serchArray.push(item);}/*name查詢*/if(item.name.indexOf(key)>-1){serchArray.push(item);}/*地址查詢*/if(item.adress.indexOf(key)>-1){serchArray.push(item);}});this.getShowData1(serchArray); }else{this.getShowData1(this.newsList); } }六、完整頁面代碼
①首頁部分
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>帝國企業管理系統</title><!--引用的一些樣式--><link rel="stylesheet" href="js/reset.css" type="text/css"/><link rel="stylesheet" href="css/elementUi.css" type="text/css"/><link rel="stylesheet" href="css/styles.css"><link rel="stylesheet" href="css/base.css" type="text/css"/><link rel="stylesheet" href="css/main.css" type="text/css"/><!--引入的字體樣式--><link rel="stylesheet" href="fonts/element-icons.woff"><link rel="stylesheet" href="fonts/element-icons.ttf"><link rel="stylesheet" href="fonts/ionicons.svg"><link rel="stylesheet" href="fonts/ionicons.ttf"><link rel="stylesheet" href="fonts/ionicons.woff"><!--引用的vue 和elementui組建庫--><script src="js/vue.js"></script><script src="js/elementUi.js"></script></head> <body><div id="one"><!--第一行數據--><el-form align="center"><font size="50px" color="#8b0000"> 張氏帝國企業管理系統首頁</font><el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" align="center"><el-menu-item index="1"><font color="#000000">首頁</font></el-menu-item><el-submenu index="2"><template slot="title"><font color="#000000">企業管理</font></template><el-menu-item index="2-1"><el-link type="success"><a href="https://alibaba.com" color="yellow">人才培養</a></el-link></el-menu-item><el-menu-item index="2-2"><el-link><a href="https://baidu.com" color="blue">企業文化</a></el-link></el-menu-item><el-menu-item index="2-3"><el-link><a href="List_form.html" color="blue">企業查看</a></el-link></el-menu-item></el-submenu><el-menu-item index="4"><font color="#000000">打卡管理</font></el-menu-item><el-menu-item index="4"><font color="#000000">求職</font></el-menu-item><el-menu-item index="4"><font color="#000000">學習</font></el-menu-item><el-menu-item index="4"><font color="#000000">討論區</font></el-menu-item><el-menu-item index="4"><font color="#000000">發現</font></el-menu-item><el-menu-item index="4"><font color="#000000">試題</font></el-menu-item><el-menu-item index="4"><font color="#000000">搜索</font></el-menu-item><el-menu-item index="4"><font color="#000000">地圖</font></el-menu-item><el-menu-item index="4"><font color="#000000">文庫</font></el-menu-item><el-menu-item index="4"><font color="#000000">幫助</font></el-menu-item></el-menu><img src="images/bg_jsh.png" id="bg"></el-form><br></div> </body><script>new Vue({el:"#one",}) </script></html>②企業查看詳情部分
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>ICBC詳情頁</title><!--引用的一些樣式--><link rel="stylesheet" href="js/reset.css" type="text/css"/><link rel="stylesheet" href="css/elementUi.css" type="text/css"/><link rel="stylesheet" href="css/styles.css"><link rel="stylesheet" href="css/base.css" type="text/css"/><link rel="stylesheet" href="css/main.css" type="text/css"/><link rel="stylesheet" href="css/bootstrap.min.css"><!--引用的vue 和elementui組建庫--><script src="js/vue.js"></script><script src="js/elementUi.js"></script><script src="js/jquery.min.js"></script><!--這是樣式--><style>#tianjia{}.title{padding:10px;border-bottom: 1px solid #00ffff;}.mask{width:300px;height:250px;background: rgba(255,255,255,1);position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;z-index:47;border-radius: 5px;}#mask{background:rgba(0,0,0,.5);width:100%;height:100%;position:fixed;z-index:4;top:0;left:0;}</style></head> <body><div id="one" align="center"><el-form align="center"><!--第一行 標題--><el-row><font size="50px" color="#8b0000">張氏帝國企業管理系統詳情頁</font></el-row><!--這是新增的查詢功能--><input type="text" placeholder="請輸入要查詢的條件" style="width:45%" v-model="search" v-on:input="searchFn"><!--第二行 添加按鈕 --><div id="tianjia"><input type="text" name="id" v-model="addDetail.id" value="" placeholder="請輸入公司代號" style="width: 13%;"><input type="text" name="name" v-model="addDetail.name" value="" placeholder="請輸入公司名稱" style="width: 13%;"><input type="text" name="adress" v-model="addDetail.adress" value="" placeholder="請輸入公司地址" style="width: 13%;"><el-button type="success" size="big" round="true" @click.native.prevent="adddetail()"><font color="#f0f8ff" size="2px">添加</font></el-button></div><!--第三行 展示數據區域--><el-form ><el-table :data="newsList" style="width:100%" align="center"><el-table-column prop="id" label="公司代號" width="180"></el-table-column><el-table-column prop="name" label="公司名稱" width="180"></el-table-column><el-table-column prop="adress" label="公司地址" width="180"></el-table-column><!--增加 操作 菜單 以及旗下的子菜單 增加 修改--><el-table-column label="操作" width="150"><template slot-scope="scope"><!--修改按鈕--><el-button @click.native.prevent="editdetail(scope.$index,newsList)" type="info" size="small">修改</el-button><!--刪除按鈕--><el-button @click.native.prevent="deletedetail(scope.$index,newsList)" type="danger" size="small">刪除</el-button></template></el-table-column></el-table></el-form><!--編輯彈框部分--><div><el-dialog title="編輯" :visible.sync="dialogFormVisible" width="30%" :before-close="handleClose" append-to-body="true"><!--這就是一個表格--><el-form :model="form" ><!--公司ID--><el-form-item label="公司ID"><el-input v-model="form.id" autocomplete="off"></el-input></el-form-item><!--公司名稱--><el-form-item label="公司名稱"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><!--公司地址--><el-form-item label="公司地址"><el-input v-model="form.adress" autocomplete="off"></el-input></el-form-item></el-form><!--確定, 取消 按鈕--><div><el-button type="primary" @click.native.prevent="editSubForm" :loading="addLoading">確定</el-button><el-button @click.native.prevent="dialogFormVisible=false">取消</el-button></div></el-dialog></div><!--分頁部分--><div class="block"><span class="demostration"></span><el-pagination @size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[10,20,30,40]":page-size="100"layout="total,sizes,prev,pager,next,jumper":total="100"></el-pagination></div></el-form> </div></body><script>var _index;new Vue({el:"#one",/*定義的數據*/data:{clonenewsList:[],checked:true,tableform:[],formLabeWidth:'120px',dialogFormVisible:false,editForm:[],selectList:{},search:"",currentPage:1,addDetail:{},editList:false,editDetail:{},radio:1,form:{id:"",name:"",adress:""},/*表格中寫死的數據*/newsList:[{id:"001",name:"阿里巴巴",adress:"杭州湖畔花園",},{id:"002",name:"工銀科技",adress:"北京朝陽區天源祥泰大廈"},{id:"003",name:"IBM",adress:"海淀區中關村軟件園"},{id:"004",name:"華為",adress:"北京海淀區北研所"},{id:"005",name:"網龍",adress:"福州長樂湖"},{id:"006",name:"BOSS直聘",adress:"北京朝陽區太陽宮"},{id:"007",name:"滴滴",adress:"北京海淀區上地"},{id:"008",name:"中國軟件",adress:"北京海淀區北下關"},{id:"009",name:"小米",adress:"北京海淀區清河"},{id:"010",name:"跟誰學",adress:"北京海淀區中關村"},{id:"011",name:"美團",adress:"北京海淀區中關村"},{id:"012",name:"今日頭條",adress:"北京海淀區清河"},]/*寫死的數據結束*/},methods:{/*添加方法*/adddetail:function(){this.$confirm('確認進行添加','是否繼續?','提示',{confirmButtonText:'確定',confirmButtonText:'取消',}).then(()=>{this.newsList.push({id:this.addDetail.id,name:this.addDetail.name,adress:this.addDetail.adress,}),/*成功添加之后的提示信息*/this.$message({type: 'success',message:'添加成功',})}).catch((err)=>{this.$message({type:'error',message:err})})},/*刪除方法*/deletedetail:function (index, rows) {this.$confirm('此操作將刪除數據,','是否繼續?','提示',{confirmButtonText:'確定',confirmButtonText:'取消',type:'warning'}).then(()=>{this.newsList.splice(index,1)this.$message({type: 'success',message:'刪除成功',})}).catch((err) =>{this.$message({type:'error',message:err})})},/*修改方法*/editdetail:function (index,rows) {this.dialogFormVisible=truethis.selected=index;this.form=JSON.parse(JSON.stringify(this.newsList))[index];},/*提交修改*/editSubForm:function(){Vue.set(this.newsList,this.selected,this.form);this.getShowData(this.newsList);this.dialogFormVisible=false;},/*查詢方法*/searchFn:function (e) {var key=e.target.value;/*查詢公司ID*/if(key){var serchArray=[];this.newsList.forEach(function (item) {if(item.id.indexOf(key)>-1){serchArray.push(item);}/*name查詢*/if(item.name.indexOf(key)>-1){serchArray.push(item);}/*地址查詢*/if(item.adress.indexOf(key)>-1){serchArray.push(item);}});this.getShowData1(serchArray);}else{this.getShowData1(this.newsList);}},/*獲取需要渲染到頁面中的數據*/getShowData:function (arr) {this.clonenewsList=JSON.parse(JSON.stringify(arr));},/*專門為查詢寫的渲染數據*/getShowData1:function (arr) {this.newsList=JSON.parse(JSON.stringify(arr));},/*分頁功能代碼*/handleSizeChange(val){console.log(`每頁${val}條`);},handleCurrentChange(val){console.log(`當前頁:$(val)`);},}}) </script></html>代碼所缺JS文件 以及圖片都可以到我的github中去下載
https://github.com/zhagnshuai19951021/My-Project.git.
總結
以上是生活随笔為你收集整理的Vue+ElementUI纯前端技术实现对表格数据的增删改查的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： element-ui table点击某行
- 下一篇： vue+element-ui实现数据的增