當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue+ElementUI纯前端技术实现对表格数据的增删改查

發布時間：2025/3/21 vue 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 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、頁面布局

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" ><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"><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"><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" ><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实现数据的增

vue

Vue+ElementUI纯前端技术实现对表格数据的增删改查

Vue+ElementUI純前端技術實現對表格數據的增刪改查

一、頁面結構

二、涉及到的技術知識

三 、如何去書寫一個頁面結構