vue中el-table增加行、删除行操作 

1 <el-button type="text" @click="addRow">+ 增加行</el-button>
 1 <el-table
 2       border
 3       :data="CategoryTable"
 4       ooltip-effect="dark"
 5     >
 6       <el-table-column type="selection" width="55" align="center">
 7       </el-table-column>
 8       <el-table-column type="index" width="100" label="序号" align="center"> </el-table-column>
 9       <el-table-column prop="categoryCode" label="卷烟品类编码" align="center">
10       </el-table-column>
11       <el-table-column prop="categoryName" label="卷烟品类名称" align="center">
12       </el-table-column>
13       <el-table-column prop="length" label="长度(cm)" align="center">
14       </el-table-column>
15       <el-table-column prop="width" label="宽度(cm)" align="center">
16       </el-table-column>
17       <el-table-column prop="height" label="高度(cm)" align="center">
18       </el-table-column>
19       <el-table-column prop="classifiedCigarettes" label="归类卷烟" align="center">
20       </el-table-column>
21       <el-table-column prop="operation" label="操作" align="center">
22         <template slot-scope="scope">
23           <el-button type="text" size="mini" @click="deleteRow(scope.$index, scope.row)">删除</el-button>
24         </template>
25       </el-table-column>
26     </el-table>
 1 //增加行
 2     addRow() {
 3       let list = {
 4         categoryCode: '',
 5         categoryName: '',
 6         length: '',
 7         width: '',
 8         height: '',
 9         classifiedCigarettes: '',
10       }
11       this.CategoryTable.push(list)
12     },
13     // 删除行
14     deleteRow (index, row) {
15         this.CategoryTable.splice(index, 1)
16     },

 

posted @ 2022-05-17 18:06  //唉  阅读(4044)  评论(0)    收藏  举报