el-table表格组件可操作表格列，可编辑当前行数据，可保存可删除，通过js添加一行，输入数据保存当前行

先看效果图：最右侧加号按钮可在下方列表添加一行空数据，同时在后面放一个保存按钮，可在列里进行下拉框和输入框等操作，选择好，填好数据，点击后面的保存按钮即可保存调用后端接口即可保存当前数据！

 Html代码：

 <!-- 下面表格数据，添加操作区 -->
<el-table :data="standardTable" stripe style="width: 100%" max-height="750" border>
        <el-table-column type="index" label="序号" width="60" align="center">
        </el-table-column>
        <el-table-column prop="mainTable" label="标准表表名" width="150" align="center">
        </el-table-column>
        <el-table-column prop="mainTableColumn" label="表属性">
        <!-- 下面的内容如果是通过js新添加的没有id则让他能够进行选择，保存后会有id属性的把这个选择框禁用掉 -->
          <template slot-scope="scope">
            <el-select style="width:100%" v-model="scope.row.mainTableColumn" filterable :disabled="scope.row.id ? true : false" clearable placeholder="请选择">
              <el-option v-for="item in standardProps" :key="item.value" :label="item.tableColumn" :value="item.tableColumn">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="sonTable" label="目标表表名" width="200" align="center">
        </el-table-column>
        <el-table-column prop="sonTableColumn" label="表属性">
        <!-- 下面的内容如果是通过js新添加的没有id则让他能够进行选择，保存后会有id属性的把这个选择框禁用掉 -->
          <template slot-scope="scope">
            <el-select style="width:100%" v-model="scope.row.sonTableColumn" filterable :disabled="scope.row.id ? true : false" clearable placeholder="请选择">
              <el-option v-for="item in targetProps" :key="item.value" :label="item.tableColumn" :value="item.tableColumn">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="isDict" label="是否字典" width="100" align="center">
         <!-- 下面的内容如果是通过js新添加的没有id则让他能够进行选择，保存后会有id属性的把这个选择框禁用掉 -->
          <template slot-scope="scope">
            <el-switch :active-value="1" :inactive-value="0" :disabled="scope.row.id ? true : false" v-model="scope.row.isDict"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="sonSelect" label="子查询语句" width="200">
         <!-- 下面的内容如果是通过js新添加的没有id则让他能够进行选择，保存后会有id属性的把这个选择框禁用掉 -->
          <template slot-scope="scope">
            <el-input v-model="scope.row.sonSelect" :disabled="scope.row.id ? true : false"></el-input>
          </template>
        </el-table-column>
        <el-table-column width="150" align="center">
        <!-- 下面：有id则让它能够删除，没有id就只让它保存就好（有其它需求的也可以做修改） -->
          <template slot-scope="scope">
            <el-button type="success" v-if="!scope.row.id" @click="addSynTableRelation(scope.row)" style="min-width:60px">保存</el-button>
        <!-- 删除做了是否确认删除验证 -->
            <el-popconfirm v-else title="确定删除吗？" @onConfirm="deleteTableRelation(scope.row)">
              <el-button type="danger" slot="reference" style="min-width:60px">删除</el-button>
            </el-popconfirm>
          </template>
          <template slot="header">
            <!-- 通过js添加行数据的按钮 -->
            <el-button type="primary" @click="addRow()" class="el-icon-plus" style="min-width:50px"></el-button>
          </template>
        </el-table-column>
      </el-table>

data()中定义的一些全局变量：

data(){
    return{
      //标准表
      standardTable: [],
      //下拉框的数据源
      standardProps:[],
      //下拉框数据源2
      targetProps:[]
    }
}

js代码：（methods中）

    //添加一个空行，某个字段需要提前复制的话可在下面添加时直接复制即可
    addRow() {
    //我选择unshift方法，一直往第一行添加
        this.standardTable.unshift({
            area: this.currentArea,
            areaName: "",
            isDict: "",
            mainTable: "",
            mainTableColumn: "",
            mainTableColumnShow: "",
            sonTable: "",
            sonTableColumn: "",
            sonTableColumnShow: "",
            updateDate: ""
          })
    },

    //新增前置库关系规则接口
    addSynTableRelation(value) {
      //console.log(value);
      //调用我后端保存当前行数据的的接口
      API.addSynTableRelation(value).then(res => {
        console.log(res);
        if (res.status === 1) {
          this.$message.success("成功！")
          //下面是成功后我调用查询列表的方法，把数据重新赋值回去
          this.searchTable()
        }
      })
    },
    //删除置库关系规则接口
    deleteTableRelation(value) {
      //console.log(value);
      //下面是我删除的调用后端接口
      API.delSynTableRelation({
        id: value.id,
      }).then(res => {
        if (res.status === 1) {
          this.$message.success("成功！")
          //下面是成功后我调用查询列表的方法，把数据重新赋值回去
          this.searchTable()
        }
      })
    },

以上只是我的业务代码，可以根据自己的需求去调整修改的！如有错误请及时指正