Vue+el-table实现行内新增、编辑、取消、删除

table代码：

 1 <el-table
 2   border
 3   :data="tableData"
 4 >
 5   <el-table-column prop="name" label="Name" align="center">
 6     <template slot-scope="scope">
 7       <el-input
 8         v-if="scope.$index === 0"
 9         v-model="scope.row.name"
10         maxlength="30"
11         placeholder="Required"
12       />
13       <span v-else v-text="scope.row.name"></span>
14     </template>
15   </el-table-column>
16   <el-table-column prop="inIp" label="Internal IP" align="center">
17     <template slot-scope="scope">
18       <el-select
19         v-if="scope.row.isEdit"
20         v-model="scope.row.inIp"
21         placeholder="Required"
22       >
23         <el-option
24           v-for="(item,index) in internalIpList"
25           :key="index"
26           :label="item"
27           :value="item"
28         />
29       </el-select>
30       <span v-else v-text="scope.row.inIp"></span>
31     </template>
32   </el-table-column>
33   <el-table-column prop="inPort" label="Internal Port" align="center">
34     <template slot-scope="scope">
35       <el-input
36         v-if="scope.row.isEdit"
37         v-model="scope.row.inPort"
38         maxlength="20"
39         placeholder="Required"
40       />
41       <span v-else v-text="scope.row.inPort"></span>
42     </template>
43   </el-table-column>
44   <el-table-column prop="outPort" label="External Port" align="center">
45     <template slot-scope="scope">
46       <el-input
47         v-if="scope.row.isEdit"
48         v-model="scope.row.outPort"
49         maxlength="20"
50         placeholder="Required"
51       />
52       <span v-else v-text="scope.row.outPort"></span>
53     </template>
54   </el-table-column>
55   <el-table-column prop="enabled" label="Status" align="center">
56     <template slot-scope="scope">
57       <el-select v-if="scope.row.isEdit" v-model="scope.row.enabled">
58         <el-option label="Enabled" :value="1"/>
59         <el-option label="Disabled" :value="0"/>
60       </el-select>
61       <span v-else v-text="scope.row.enabled === 1 ? 'Enabled' : 'Disabled'"></span>
62     </template>
63   </el-table-column>
64   <el-table-column label="Operation" align="center" class-name="small-padding fixed-width">
65     <template slot-scope="scope">
66       <el-button
67         v-if="scope.$index === 0"
68         size="mini"
69         type="text"
70         style="color: #2090c1"
71         @click="handleAdd(scope.row)"
72       >Add
73       </el-button>
74       <el-button
75         v-if="scope.$index !== 0"
76         size="mini"
77         type="text"
78         style="color: #2090c1"
79         @click="handleUpdate(scope.row)"
80       >{{ scope.row.isEdit ? 'Apply' : 'Edit' }}
81       </el-button>
82       <el-button
83         v-if="scope.$index !== 0"
84         size="mini"
85         type="text"
86         style="color: #F56C6C"
87         @click="handleDelete(scope.row)"
88       >{{ scope.row.isEdit ? 'Cancel' : 'Delete' }}
89       </el-button>
90     </template>
91   </el-table-column>
92 </el-table>

js部分：

  1 export default {
  2     data() {
  3         return {
  4             tableData: [],
  5              internalIpList: []
  6         }
  7     },
  8     methods: {
  9         // 获取列表
 10         getReverseShellList() {
 11           getShellList().then(res => {
 12             if (res.code === 200) {
 13               if (res.data && res.data.length > 0) {
 14                   // 获取到的数据加上 isEdit是false， 默认是文本
 15                 res.data.forEach(item => {
 16                   item['isEdit'] = false
 17                 })
 18               }
 19               this.tableData = res.data
 20               // 在表格列表前插入一行，用来新增数据
 21               this.tableData.unshift({
 22                 name: '',
 23                 inIp: '',
 24                 inPort: null,
 25                 outPort: null,
 26                 enabled: null,
 27                 isEdit: true
 28               })
 29             }
 30           })
 31         },
 32         // 新增按钮
 33         handleAdd(row) {
 34           for (let key in row) {
 35               // 判断一行字段是否输入完整
 36             if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {
 37               this.msgError('Please complete the information')
 38               return
 39             }
 40           }
 41           const params = {
 42             name: row.name,
 43             inIp: row.inIp,
 44             inPort: parseInt(row.inPort),
 45             outPort: parseInt(row.outPort),
 46             enabled: row.enabled
 47           }
 48           addShell(params).then(res => {
 49             if (res.code === 200) {
 50               this.msgSuccess('Add reverse shell successfully')
 51               row.isEdit = false
 52               this.getReverseShellList()
 53             }
 54           })
 55         },
 56         // 编辑或者Apply按钮
 57         handleUpdate(row) {
 58           // 点击Apply时
 59           if (row.isEdit) {
 60             for (let key in row) {
 61               if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {
 62                 this.msgError('Please complete the information')
 63                 return
 64               }
 65             }
 66             const params = {
 67               name: row.name,
 68               inIp: row.inIp,
 69               inPort: parseInt(row.inPort),
 70               outPort: parseInt(row.outPort),
 71               enabled: row.enabled
 72             }
 73             updateShell(params).then(res => {
 74               if (res.code === 200) {
 75                 this.msgSuccess('Update reverse shell successfully')
 76                 this.getReverseShellList()
 77               }
 78             })
 79           } else {
 80               // 点击编辑时
 81             row.isEdit = true
 82           }
 83         },
 84         // 删除或取消按钮
 85         handleDelete(row) {
 86           // 点击取消时
 87           if (row.isEdit) {
 88             this.getReverseShellList()
 89           } else {
 90               // 点击删除时
 91             this.$confirm('Are you sure to delete reverse shell?', 'warning', {
 92               confirmButtonText: 'Sure',
 93               cancelButtonText: 'Cancel',
 94               type: 'warning'
 95             }).then(() => {
 96               deleteShell(row.name).then(res => {
 97                 if (res.code === 200) {
 98                   this.msgSuccess('Delete reverse shell successfully')
 99                   this.getReverseShellList()
100                 }
101               })
102             }).catch(() => {
103             })
104           }
105         },
106     }
107 }