elementui-table新增可编辑行组件

主要结合了scope来封装该组件

通过底部添加按钮添加一行可编辑的表格行，编辑后点击确定保存，可重新打开该行进行编辑，或者直接删除。

组件部分代码TableEdit.vue

<template>
  <div id="app">
    <el-row>
      <el-col :span="24">
        <el-table size="mini" :data="tableData" border style="width: 100%" highlight-current-row>
          <!-- <el-table-column type="index"></el-table-column> -->
          <el-table-column
            v-for="(item,index) in tableTitle"
            :key="index"
            :label="item.label"

            :prop="item.prop">
            <template #default="scope">
             <span v-if="scope.row.isSet">

               <input v-if="item.type =='input'" class="iteminput" placeholder="请输入" :value="sel[item.prop]" @change="inputChange($event,item.prop)"/>
               <el-select v-if="item.type =='select'" v-model="sel[item.prop]" placeholder="请选择">
                <el-option
                  v-for="it in item.options"
                  :key="it.value"
                  :label="it.label"
                  :value="it.label+'/'+it.value">
                </el-option>
              </el-select>
             </span>
              <span v-else>
                <span v-if="item.type =='input'">{{scope.row[item.prop]}}</span>
                <span v-if="item.type =='select'">{{scope.row[item.prop].split('/')[0]}}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <template #default="scope">
             <span class="el-tag el-tag--primary  el-tag--mini" style="cursor: pointer; margin-right:10px;" @click.stop="saveRow(scope.row,scope.$index)">
               确定
             </span>
              <span class="el-tag el-tag--primary el-tag--mini" style="cursor: pointer; margin-right:10px;" @click="editRow(scope.row,scope.$index)">
               编辑
             </span>
              <span class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer; margin-right:10px;" @click="deleteRow(scope.$index,tableData,scope.row)">
               删除
             </span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <div class="el-table-add-row" style="width: 99.2%;" @click="addRow()"><span>+ 添加</span></div>
      </el-col>
    </el-row>
    <!-- <span>{{tableData}}</span> -->
  </div>
</template>

<script>

export default ({
  props: {
    datas: Object
  },
  data(){
    return{
      tableTitle: [],
      tableData: [],
      sel: {}, //选中行
    }
  },
  watch: {
　　 //普通的watch监听
    tableData(newName, oldName) {
      this.tableData = newName;
    }
  },
  mounted(){
    console.log(111)
    console.log(this.datas)
    if(this.datas != null){
      this.tableTitle = this.datas.tableTitle
      this.tableData = this.datas.tableData
    }
  },
  methods:{
    addRow(){
      for (const i of this.tableData) {
          if (i.isSet){
            return
          }
        }
        let data = {
          key:{
            isSet:true
          }
        };
        console.log(this.tableTitle)
        this.tableTitle.forEach((item)=>{
          data.key[item.prop] = ''
        })
        this.tableData.push(JSON.parse(JSON.stringify(data.key)));
        console.log(this.sel)
        console.log(this.tableData)
        this.sel = JSON.parse(JSON.stringify(data.key));
    },
    inputChange(e,prop) {
      this.sel[prop] = e.target.value;
      console.log(this.sel)
    },
    saveRow(row,index){
      console.log(row)
      if(row.isSet){
        const datas = JSON.parse(JSON.stringify(this.sel));
        for (const k in datas) {
          row[k] = datas[k] //将sel里面的value赋值给这一行。ps(for....in..)的妙用，细心的同学发现这里我并没有循环对象row
        }
        row.isSet = false;
        this.$emit("update:FathersaveRow",row);
      }
    },
    editRow(row){
      for (const i of this.tableData) {
        if (i.isSet){
          this.$message({
            type: 'warning',
            message: '请保存当前编辑项'
          });
          return;
        }
      }
      this.sel = row
      row.isSet = true
    },
    deleteRow(index, rows, row){
      console.log(row)
      this.$emit("update:FatherdeleteRow",row);
      rows.splice(index, 1);
    }
  }
})
</script>
<style lang="scss" >
  .iteminput{
    height:28px; line-height:28px; border-radius: 6px; border:1px solid #ddd;padding-left:5px;width:90%;
  }
  .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>

调用部分代码

<TableEdit
        :datas="sxdataTable"
        @update:FathersaveRow="FathersaveRow"
        @update:FatherdeleteRow="FatherdeleteRow"
      />

import TableEdit from '@/components/TableEdit'

export default {
  components: {
    TableEdit
  },
  data() {
    return {
      sxdataTable: {
        tableTitle: [
          {prop:'valueType',label:'类型',type:'select',options:[{value:'0',label:'温度'},{value:'1',label:'湿度'},{value:'2',label:'氨气浓度'},{value:'3',label:'料塔预料'}]},
          {prop:'minvalue',label:'最小值',type:'input'},
          {prop:'maxvalue2',label:'最大值',type:'input'},
          {prop:'alarmType',label:'报警方式',type:'select',options:[{value:'0',label:'电话'},{value:'1',label:'短信'},{value:'2',label:'现场(平板)'}]}
        ],
        tableData:[]
      }
}
  },
 methods: {
    FatherdeleteRow(){

    },
    FathersaveRow(val){
      console.log(val);
      console.log(this.sxdataTable.tableData)
    },
}