实现表格内编辑、新增

效果

实现过程

关于表格行：是否处在可编辑状态主要取决于自定义的isInput属性
关于取消操作：判断是新增row触发还是修改row触发主要决定于row的id是否为0
dom部分：

<el-table :data="domainData" style="width: 100%">
    <el-table-column label="域名">
        <template slot-scope="scope">
            <span v-if="scope.row.isInput">
                <el-input size="small" placeholder="请输入域名" v-model="currentRow.name"/>
            </span>
            <span v-else>{{ scope.row.name }}</span>
        </template>
    </el-table-column>
    <el-table-column label="负责人">
        <template slot-scope="scope">
            <span v-if="scope.row.isInput">
              <el-input size="small" placeholder="请输入负责人" v-model="currentRow.user"/>
            </span>
            <span v-else>{{ scope.row.user }}</span>
        </template>
    </el-table-column>
    <el-table-column label="部门">
        <template slot-scope="scope">
            <span v-if="scope.row.isInput">
                <el-select size="small" v-model="currentRow.department" placeholder="请选择部门" class="blue-theme">
	                <el-option
	                  v-for="item in departmentList"
	                  :key="item.id"
	                  :label="item.name"
	                  :value="item.name">
                    </el-option>
                </el-select>
            </span>
            <span v-else>{{ scope.row.department }}</span>
        </template>
    </el-table-column>
    <el-table-column label="作用">
        <template slot-scope="scope">
            <span v-if="scope.row.isInput">
                <el-input size="small" placeholder="请输入备注" v-model="currentRow.describe"/>
            </span>
            <span v-else>{{ scope.row.describe }}</span>
        </template>
     </el-table-column>
     <el-table-column label="操作" width="220">
        <template slot-scope="scope">
            <el-button
              type="text"
              @click="modifyChildDomain(scope.row, scope.$index)">{{ scope.row.isInput ? '保存' : "修改" }}</el-button>
            <el-button
              v-if="scope.row.isInput"
              type="text"
              @click="cancelChildDomain(scope.row, scope.$index)">取消</el-button>
            <el-button
              v-if="!scope.row.isInput"
              type="text"
              @click="delChildDomain(scope.row.id)">删除</el-button>
        </template>
    </el-table-column>
</el-table>
<div class="add-child-domain" @click="addChildDomain"><span>+ 子域名</span></div>

data:
currentRow：用来保存当前编辑行的字段值

data() {
    return {
      domainData: [],
      currentRow: null
    }
  },

methods部分：

// 添加子域名按钮触发
addChildDomain() {
    for (let item of this.domainData) {
        if (item.isInput) {
            return this.$message.warning("请先保存当前编辑项");
        }
    }
    let inputRow = { id: 0, "name": "", "user": "", "department": "", "describe": "", "isInput": true };
    this.domainData.push(inputRow);
    this.currentRow = JSON.parse(JSON.stringify(inputRow))
},
// 保存，修改子域名
modifyChildDomain(row, index) {
    //点击修改 判断是否已经保存所有操作
    for (let item of this.domainData) {
        if (item.isInput && item.id != row.id) {
          return this.$message.warning("请先保存当前编辑项");
        }
    }
    // 保存 or 修改
    if(row.isInput) {
        if(!this.currentRow.name) {
            return this.$message.warning("域名不能为空")
        }
        // 新增保存 or 修改保存
        if(this.currentRow.id) {
            // 修改保存ajax
            ...
        } else {
            // 新增保存ajax
            ...
        }
    } else {
        this.currentRow = JSON.parse(JSON.stringify(row))
        row.isInput = true
    }
},
// 取消
cancelChildDomain(row, index) {
    if (!this.currentRow.id) {
        this.domainData.splice(index, 1);
    }
    return row.isInput = !row.isInput;
}

这是参考网上文章实现的，尊重原创