element-ui 表格可编辑添加删除

 <template>

   <div id="Cold_all">

     <div class="Cold_Left">

       <el-row>

         <div class="font_style"> 1.输入计算基本数据</div>

         <el-col :span="24">

           <el-table

             size="mini"

             :data="master_user.data"

             border

             style="width: 100%;margin:auto"

             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"

               :key="index"

             >

               <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="操作">

               <template slot-scope="scope">

                 <span

                   class="Insert_Cold"

                   style="cursor: pointer;"

                   @click.stop="saveRow(scope.row,scope.$index)"

                 >保存</span>

                 <span

                   class="Edit_Cold"

                   style="cursor: pointer;"

                   @click="editRow(scope.row,scope.$index)"

                 >编辑</span>

                 <span

                   class="Delete_Cold"

                   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>

     </div>

   </div>

 </template>

<script>

export default {

  name: "",

  data() {

    return {

      master_user: {

        sel: null, //选中行

        columns: [

          {

            prop: "OutdoorTDB",

            label: "室外计算温度(℃)",

          },

          {

            prop: "IndoorTDB",

            label: "室内计算温度(℃)"

          },

          {

            prop: "TdbStartTime",

            label: "运行开始时间"

          },

          {

            prop: "TdbEndTime",

            label: "运行结束时间"

          }

        ],

        data: []

      }

}

<script>

methods: {

    //基本输入列表

    add() {

      for (let i of this.master_user.data) {

        if (i.isSet) return this.$message.error("请先保存当前编辑项");

      }

      let j = {

        index: "",

        OutdoorTDB: "",

        IndoorTDB: "",

        TdbStartTime: "",

        TdbEndTime: "",

        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];

      }

      row.isSet = false;

    },

    editRow(row) {

      //编辑

      for (let i of this.master_user.data) {

        if (i.isSet) return this.$message.error("请先保存当前编辑项");

      }

      this.master_user.sel = row;

      row.isSet = true;

    },

    deleteRow(index, rows) {

      //删除

      rows.splice(index, 1);

    },

components: {}

}