學(xué)習(xí)目標(biāo)：

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

原型圖實(shí)例：

增和刪

增部分結(jié)構(gòu)

<el-button type="primary" @click="dialogXinjian = true">+新建</el-button> 模態(tài)框 <!-- +新建 按鈕跳模態(tài)框部分 --><el-dialog :visible.sync="dialogXinjian" append-to-body top="5vh"><!-- 自定義表頭樣式 --><div slot="title" class="dialog-title"><span>新增指標(biāo)配置</span></div><!-- from表單結(jié)構(gòu)樣式 --><el-form ref="form2" :model="form2" label-width="80px"><el-form-item label="指標(biāo)名稱:"><el-selectv-model="valueSelct_zbName"placeholder="請(qǐng)選擇"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="指標(biāo)分類:"><el-selectv-model="valueSelct_zbType"placeholder="請(qǐng)選擇"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="服務(wù)等級(jí):"><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="保障等級(jí):"><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="產(chǎn)品類別:"><el-checkbox-group v-model="form2.cpType"><el-checkboxlabel="互聯(lián)網(wǎng)專線"name="1"value="hlwzx"></el-checkbox><el-checkboxlabel="傳統(tǒng)數(shù)據(jù)專線"name="2"value="sjzx"></el-checkbox><el-checkboxlabel="政企專網(wǎng)專線"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="產(chǎn)品參數(shù)*"> </el-form-item><el-form-itemv-for="item in form2.cs_list":key="item.key"label="參數(shù)展現(xiàn)"><el-selectv-model="item.valueSelct2"placeholder="請(qǐng)選擇"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="請(qǐng)輸入內(nèi)容"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="閾值設(shè)定:"><el-selectv-model="valueSelct3"placeholder="請(qǐng)選擇"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="請(qǐng)輸入數(shù)值"style="width: 110px; margin-left: 15px"></el-input></el-form-item><el-form-item label="當(dāng)前值:"><div class="current_num"><i>459</i></div></el-form-item><!-- 底部添加參數(shù)按鈕 --><el-form-item><el-button @click="addCanShu" type="primary">+添加參數(shù)</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表單綁定的數(shù)據(jù)

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

函數(shù)

//彈出新建按鈕的模態(tài)框handleNewCreate() {this.dialogXinjian = true每點(diǎn)擊一次新建，讓表單數(shù)據(jù)清空，這樣的做法跟客戶的交互效果不太好，所以清空不能在這里寫//this.valueSelct_zbName = ''//this.valueSelct_zbType = ''//this.form2.fwdengji = []//this.form2.bzdengji = []//this.form2.cpType = []},//新建模態(tài)框底部新建按鈕函數(shù)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,這個(gè)Format是封裝好了的一個(gè)格式化時(shí)間格式的工具函數(shù)，下篇文章再把它分享出來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("指標(biāo)名稱不能為空！");}},

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

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

改和查

保存按鈕需要注意的事情

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

對(duì)應(yīng)函數(shù)

//編輯按鈕跳模態(tài)框JS兩個(gè)形參接收傳過來的數(shù)據(jù)handleClick(row, index) {// console.log(index);this.num = index; 自己在data存的數(shù)據(jù)把它變成索引來用，方便后面用它行數(shù)據(jù)里的對(duì)應(yīng)字段數(shù)據(jù) 賦值給 表單雙向綁定的數(shù)據(jù)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;},

保存功能的實(shí)現(xiàn)

<!-- 模態(tài)框底部操作按鈕 --><div slot="footer" class="dialog-footer"><el-button type="primary" @click="handleSaveData">保 存</el-button><el-button @click="dialogBianji = false">取 消</el-button></div> 編輯模態(tài)框底部保存按鈕函數(shù)handleSaveData() {this.dialogBianji = false;這里就可以用上面造好的索引來辦點(diǎn)事，實(shí)現(xiàn)點(diǎn)擊某一行的編輯時(shí)索引已經(jīng)準(zhǔn)備好了，你那三組CheckBox表單隨意交互，反正到時(shí)候賦值給tableData 對(duì)應(yīng)索引行 的字段即可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，到這里就基本實(shí)現(xiàn)了增刪改查。

總結(jié)：

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

能力有限，歡迎糾錯(cuò)，一起進(jìn)步。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。