vue element 表格的动态增减表格行

美酒没故事°

已于 2023-06-15 10:56:14 修改

阅读量413

点赞数 1

分类专栏： vue2的封装【拿来主义】文章标签： javascript 动态增减表格 elementui table 增减行

于 2021-02-24 13:28:18 首次发布

本文链接：https://blog.csdn.net/qq_42618566/article/details/114018622

版权

vue2的封装【拿来主义】专栏收录该内容

11 篇文章 1 订阅

订阅专栏

在这里插入图片描述

html：

<el-table size="mini" :data="eventSetings">
   <el-table-column label="消费金额">
     <template slot-scope="scope">
       <el-input v-model="scope.row.money" size="mini" />
     </template>
   </el-table-column>
   <el-table-column label="减免金额">
     <template slot-scope="scope">
       <el-input v-model="scope.row.reduce" size="mini" />
     </template>
   </el-table-column>
   <el-table-column align="right">
     <template slot="header" slot-scope="scope">
       <el-button type="primary" @click="addEventSet">添 加</el-button>
     </template>
     <template slot-scope="scope">
       <el-button
         size="mini"
         type="danger"
         @click="deleteEventSet(scope.$index, scope.row)"
         >删除</el-button
       >
     </template>
   </el-table-column>
 </el-table>

js：

// 数据部分
eventSetings: [
  {
    money: "",
    reduce: "",
  },
]





// 逻辑部分
// 添加
addEventSet() {
   this.eventSetings.push({
     money: "",
     reduce: "",
   });
 },
 // 删除
 deleteEventSet(index, data) {
   console.log(index, data);
   this.eventSetings.splice(index, 1);
 },