這篇文章主要爲大家詳細介紹了Vue+Element實現表格的編輯、刪除、以及新增行的最優方法,具有一定的參考價值,感興趣的小夥伴們可以參考一下
之前已經實現了表格的新增、編輯和刪除,在我的上篇文章中寫的也比較詳細。但是總感覺有點不完美,首先新增了一行以後,必須要雙擊某一個單元格參能進行內容的輸入。從代碼上來說,代碼量也較大;而且使用的是原生的html標籤,有點尷尬。
於是,進一步研以後,進行了一定的優化,直接使用vue的代碼實現,不僅大大減少了代碼量,還實現了操作的友好性。下面直接上代碼:
1 html部分
這次的優化其實主要在於html部分,直接將vue的el-input標籤或者el-select標籤放入表格的每個單元格中。這樣就不用去考慮表格內容的編輯問題了。
<el-form :model="inServForm" ref="inServForm" label-width="130px" size="small"> <el-form-item label="輸入參數列表" prop="servin" > <el-button type="primary" @click="addRow(infiledList)">新增</el-button> <template> <el-table border :data="infiledList" style="width: 100%" > <el-table-column prop="fildna" label="名稱" style="width:6vw;" > <template scope="scope"> <el-input size="mini" v-model="scope.row.fildna" ></el-input> </template> </el-table-column> <el-table-column prop="fildtp" label="類型"> <template scope="scope"> <el-select v-model="scope.row.fildtp" clearable > <el-option v-for="item in fildtps" :key="item.value" :label="item.text" :value="item.value"> </el-option> </el-select> </template> </el-table-column> <el-table-column prop="remark" label="備註"> <template scope="scope"> <el-input size="mini" v-model="scope.row.remark" ></el-input> </template> </el-table-column> <el-table-column fixed="right" label="操作"> <template slot-scope="scope"> <el-button @click.native.prevent="deleteRow(scope.$index, infiledList)" size="small"> 移除 </el-button> </template> </el-table-column> </el-table> </template> </el-form-item> </el-form>
2 數據定義部分
data () { return { infiledList:[], fildtps:[{text:'字符',value:'1'},{text:'數字',value:'2'}], }
3 方法部分
methods: { deleteRow(index, rows) {//刪除改行 rows.splice(index, 1); }, addRow(tableData,event){ tableData.push({ fildna: '',fildtp:'',remark:'' }) }, }
4 效果圖展示
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持神馬文庫。