學習目標：

【雖然已經有很多輪子把增刪改查封裝好了直接用就行了，在github上面一大堆，但身為前端人，這種基本功當然是必須具備的】

原型圖實例：

增和刪

增部分結構

<el-button type="primary" @click="dialogXinjian = true">+新建</el-button> 模態框 <!-- +新建 按鈕跳模態框部分 --><el-dialog :visible.sync="dialogXinjian" append-to-body top="5vh"><!-- 自定義表頭樣式 --><div slot="title" class="dialog-title"><span>新增指標配置</span></div><!-- from表單結構樣式 --><el-form ref="form2" :model="form2" label-width="80px"><el-form-item label="指標名稱:"><el-selectv-model="valueSelct_zbName"placeholder="請選擇"style="width: 300px"><el-optionv-for="item in options_zbName":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item label="指標分類:"><el-selectv-model="valueSelct_zbType"placeholder="請選擇"style="width: 300px"><el-optionv-for="item in options_zbType":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item label="服務等級:"><el-checkbox-group v-model="form2.fwdengji"><el-checkbox label="金牌" name="jin" value="jin"></el-checkbox><el-checkbox label="銀牌" name="yin" value="yin"></el-checkbox><el-checkbox label="銅牌" name="tong" value="tong"></el-checkbox><el-checkboxlabel="普通"name="putong"value="putong"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="保障等級:"><el-checkbox-group v-model="form2.bzdengji"><el-checkbox label="AAA" name="AAA" value="AAA"></el-checkbox><el-checkbox label="AA" name="AA" value="AA"></el-checkbox><el-checkbox label="A" name="A" value="A"></el-checkbox><el-checkboxlabel="普通"name="putong"value="putong"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="產品類別:"><el-checkbox-group v-model="form2.cpType"><el-checkboxlabel="互聯網專線"name="1"value="hlwzx"></el-checkbox><el-checkboxlabel="傳統數據專線"name="2"value="sjzx"></el-checkbox><el-checkboxlabel="政企專網專線"name="3"value="zqzx"></el-checkbox><el-checkboxlabel="MPLS-VPN專線"name="4"value="vpnzx"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="產品參數*"> </el-form-item><el-form-itemv-for="item in form2.cs_list":key="item.key"label="參數展現"><el-selectv-model="item.valueSelct2"placeholder="請選擇"style="width: 100px"><el-optionv-for="item in options2":key="item.value":label="item.label":value="item.value"></el-option></el-select><span> > </span><el-inputv-model="item.value"placeholder="請輸入內容"style="width: 100px; margin-right: 20px"></el-input><el-button@click.prevent="removeCanShu(item)"icon="el-icon-error"></el-button></el-form-item><el-form-item label="閾值設定:"><el-selectv-model="valueSelct3"placeholder="請選擇"style="width: 100px"><el-optionv-for="item in options3":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-inputv-model="faZhiValue"placeholder="請輸入數值"style="width: 110px; margin-left: 15px"></el-input></el-form-item><el-form-item label="當前值:"><div class="current_num"><i>459</i></div></el-form-item><!-- 底部添加參數按鈕 --><el-form-item><el-button @click="addCanShu" type="primary">+添加參數</el-button></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="handlePush()">新 建</el-button><el-button @click="dialogXinjian = false">取 消</el-button></div></el-dialog>

form表單綁定的數據

兩個select綁定的數據和optionsvalueSelct_zbName: "",options_zbName: [{id: "1",value: "專線資源勘察反饋時長",label: "專線資源勘察反饋時長",},{id: "2",value: "專線業務可實施滿足率",label: "專線業務可實施滿足率",},{id: "3",value: "專線業務開通及時率",label: "專線業務開通及時率",},{id: "4",value: "專線業務停/復機時長",label: "專線業務停/復機時長",},{id: "5",value: "開通交付用后即評",label: "開通交付用后即評",},],valueSelct_zbType: "",options_zbType: [{id: "1",value: "業務交互類",label: "業務交互類",},{id: "2",value: "業務體驗類",label: "業務體驗類",},{id: "3",value: "服務保障類",label: "服務保障類",},{id: "4",value: "服務行為類",label: "服務行為類",},],多選框綁定的數據form2: {fwdengji: [],bzdengji: [],cpType: [],},

函數

//彈出新建按鈕的模態框handleNewCreate() {this.dialogXinjian = true每點擊一次新建，讓表單數據清空，這樣的做法跟客戶的交互效果不太好，所以清空不能在這里寫//this.valueSelct_zbName = ''//this.valueSelct_zbType = ''//this.form2.fwdengji = []//this.form2.bzdengji = []//this.form2.cpType = []},//新建模態框底部新建按鈕函數handlePush() {let _zhibiao = this.valueSelct_zbName;if (_zhibiao) {this.dialogXinjian = false;this.tableData.splice(0, 0, {zb_name: _zhibiao,fw_level: this.form2.fwdengji,bz_level: this.form2.bzdengji,cp_type: this.form2.cpType,這個Format是封裝好了的一個格式化時間格式的工具函數，下篇文章再把它分享出來zb_date: new Date().Format("yyyy-MM-dd"),});清空在這里寫，方便多次添加this.valueSelct_zbName = ''this.valueSelct_zbType = ''this.form2.fwdengji = []this.form2.bzdengji = []this.form2.cpType = []return;}else{this.$message.warning("指標名稱不能為空！");}},

好了，增的功能已經實現了，原理其實很簡單，無非就是一份小數據要融入到另一份大數據里面，
那么既然要融入大數據，就必然遵循大數據的數據格式，比如字段名等等，而大數據新item的值其實就是
表單組件雙向綁定的值，僅此而已。

刪的原理和接下來說的索引問題密不可分，直接 用tableData.splice（index，1）即可，非常簡單

改和查

保存按鈕需要注意的事情

<el-table-column fixed="right" label="操作" width="100"><template slot-scope="scope"><el-button這里用模板插槽，加入button按鈕，然后把table的行數據、能確認到某一行的 索引 傳參傳過去這里好像必須要用$index，餓了么的規定，有點坑@click="handleClick(scope.row, scope.$index)"type="text"size="small">編輯</el-button></template></el-table-column>

對應函數

//編輯按鈕跳模態框JS兩個形參接收傳過來的數據handleClick(row, index) {// console.log(index);this.num = index; 自己在data存的數據把它變成索引來用，方便后面用它行數據里的對應字段數據 賦值給 表單雙向綁定的數據this.form1.name = row.zb_name;this.form1.bzdengji = row.bz_level;this.form1.fwdengji = row.fw_level;this.form1.cpType = row.cp_type;this.dialogBianji = true;},

保存功能的實現

<!-- 模態框底部操作按鈕 --><div slot="footer" class="dialog-footer"><el-button type="primary" @click="handleSaveData">保 存</el-button><el-button @click="dialogBianji = false">取 消</el-button></div> 編輯模態框底部保存按鈕函數handleSaveData() {this.dialogBianji = false;這里就可以用上面造好的索引來辦點事，實現點擊某一行的編輯時索引已經準備好了，你那三組CheckBox表單隨意交互，反正到時候賦值給tableData 對應索引行 的字段即可this.tableData[this.num].fw_level = this.form1.fwdengji;this.tableData[this.num].bz_level = this.form1.bzdengji;this.tableData[this.num].cp_type = this.form1.cpType;},

OK，到這里就基本實現了增刪改查。

總結：

增——首先想到要用push方法來增加，著重的是數據進入另一個數據
刪——只要解決索引的問題，刪的問題不值一提
改——最重要的是，改了以后數據的保存，那就肯定逃不過數據之間的賦值
查——比改簡單，展示死數據而已。

能力有限，歡迎糾錯，一起進步。

總結

以上是生活随笔為你收集整理的vue脚手架开发 + element-UI组件 实现 增删改查的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。