vue element-ui 實現表格可編輯，刪除，和添加

思路：
一.添加一行數據
就是在添加的時候新建一個key值和表行key值一抹一樣的對象

let j = {
          "type": "",
          "addport": "",
          "user": "",
          "pwd": "",
          "info": "",
          "isSet": true,
        };

二.編輯一行的數據
就是根據isSet的存在與否來判斷這一行是input顯示（可編輯狀態）還是span顯示（不可編輯狀態）

 <template slot-scope="scope"> <span v-if="scope.row.isSet"> <el-input size="mini" placeholder="請輸入內容" v-model="master_user.sel[item.prop]"> </el-input> </span> <span v-else>{{scope.row[item.prop]}}</span> </template> 

三.刪除一行
就是拿到這一行的索引值，然后用數組的splice（）刪除就好

 deleteRow(index, rows) { //刪除 rows.splice(index, 1) } 

全部代碼 ps:這里的代碼是需要在vue-cli腳手架上面來運行的啊，相信小伙伴在做這個功能的時候，應該已經會用vue-cli了吧，對了，style后面是用的sass 如果不會sass,又想運行我的代碼，建議刪掉style.

<template> <div id="app"> <el-row> <el-col :span="24"> <el-table size="mini" :data="master_user.data" border style="width: 100%" highlight-current-row> <el-table-column type="index"></el-table-column> <el-table-column v-for="(item,index) in master_user.columns" :label="item.label" :prop="item.prop" :width="item.width"> <template slot-scope="scope"> <span v-if="scope.row.isSet"> <el-input size="mini" placeholder="請輸入內容" v-model="master_user.sel[item.prop]"> </el-input> </span> <span v-else>{{scope.row[item.prop]}}</span> </template> </el-table-column> <el-table-column label="操作" width=""> <template slot-scope="scope"> <span class="el-tag el-tag--success el-tag--mini" style="cursor: pointer;" @click.stop="saveRow(scope.row,scope.$index)"> 確定 </span> <span class="el-tag el-tag--primary el-tag--mini" style="cursor: pointer;" @click="editRow(scope.row,scope.$index)"> 編輯 </span> <span class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;" @click="deleteRow(scope.$index,master_user.data)"> 刪除 </span> </template> </el-table-column> </el-table> </el-col> <el-col :span="24"> <div class="el-table-add-row" style="width: 99.2%;" @click="add()"><span>+ 添加</span></div> </el-col> </el-row> <span>{{master_user.data}}</span> </div> </template> <script> export default { name: '', data() { return { master_user: { sel: null, //選中行 columns: [{ prop: "type", label: "遠程類型", width: 120 }, { prop: "addport", label: "連接地址", width: 150 }, { prop: "user", label: "登錄用戶", width: 120 }, { prop: "pwd", label: "登錄密碼", width: 220 }, { prop: "info", label: "其他信息" } ], data: [], }, } }, methods: { add() { for (let i of this.master_user.data) { if (i.isSet) return this.$message.warning("請先保存當前編輯項"); } let j = { "type": "", "addport": "", "user": "", "pwd": "", "info": "", "isSet": true, }; this.master_user.data.push(j); this.master_user.sel = JSON.parse(JSON.stringify(j)); }, saveRow(row, index) { //保存 let data = JSON.parse(JSON.stringify(this.master_user.sel)); for (let k in data) { row[k] = data[k] //將sel里面的value賦值給這一行。ps(for....in..)的妙用，細心的同學發現這里我並沒有循環對象row } row.isSet = false; }, editRow(row) { //編輯 for (let i of this.master_user.data) { if (i.isSet) return this.$message.warning("請先保存當前編輯11項"); } this.master_user.sel = row row.isSet = true }, deleteRow(index, rows) { //刪除 rows.splice(index, 1) } }, components: {} } </script> <style lang="scss"> .el-table-add-row { margin-top: 10px; width: 100%; height: 34px; border: 1px dashed #c1c1cd; border-radius: 3px; cursor: pointer; justify-content: center; display: flex; line-height: 34px; } </style> 

  

 
鏈接：https://www.jianshu.com/p/cba4761de6ef