vue elementui el-table实现增加行，行内编辑修改

需求：

前端进行新增表单时，同时增加表单的明细数据。明细数据部分，可进行行编辑。

效果图：

        <el-card>
          <div slot="header">
            <span style="font-weight: bold">外来人员名单2</span>
            <el-button
              style="float: right"
              type="primary"
              @click="insertDetailRow"
              >添加</el-button
            >
          </div>
          <el-table
            ref="detailTable"
            align="center"
            highlight-cell
            keep-source
            stripe
            border
            style="width: 100%"
            max-height="400"
            :data="detailTableData"
          >
            <el-table-column prop="userName" label="姓名" align="center">
              <template slot-scope="{ row, $index }">
                <span v-if="!showEdit[$index]">{{ row.userName }}</span>
                <el-input
                  v-model="detailTableData[$index].userName"
                  v-if="showEdit[$index]"
                  placeholder="请输入姓名"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="sex" label="性别" align="center">
              <template slot-scope="{ row, $index }">
                <span v-if="!showEdit[$index]">{{ row.sex }}</span>
                <el-select
                  v-model="detailTableData[$index].sex"
                  v-if="showEdit[$index]"
                  placeholder="请选择性别"
                >
                  <el-option
                    v-for="item in sexs"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="telPhone" label="手机号" align="center">
              <template slot-scope="{ row, $index }">
                <span v-if="!showEdit[$index]">{{ row.telPhone }}</span>
                <el-input
                  v-model="detailTableData[$index].telPhone"
                  v-if="showEdit[$index]"
                  placeholder="请输入手机号"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="220">
              <template slot-scope="{ row, $index }">
                <el-button
                  v-if="!showEdit[$index]"
                  @click="editDetailRow($index, row)"
                  type="primary"
                  icon="el-icon-edit"
                  circle
                />
                <el-button
                  v-if="showEdit[$index]"
                  @click="confirmDetailRow($index, row)"
                  type="success"
                  icon="el-icon-check"
                  circle
                />
                <el-button
                  v-if="!showEdit[$index]"
                  @click="removeDetailRow($index, row)"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                />
              </template>
            </el-table-column>
          </el-table>
        </el-card>

export default {
  data() {
    return {
      detailTableData: [],   
      showEdit: [], //控制显示及隐藏
      sexs: [{ label: '女', value: '女' }, { label: '男', value: '男' }]
    }
  },
  methods: {
    //添加一行
    insertDetailRow() {
      console.info(this.detailTableData)
      if (this.detailTableData != null && this.detailTableData.length > 0) {
        if (this.detailTableData[this.detailTableData.length - 1].userName === null ||
          this.detailTableData[this.detailTableData.length - 1].userName === undefined ||
          this.detailTableData[this.detailTableData.length - 1].userName.length <= 0) {
          this.$message({ type: 'error', message: '请将数据填写完整后再新增数据行!' })
          return false
        }
        //现有行取消编辑 
        this.detailTableData.forEach((ele, i) => {
          this.$set(this.showEdit, i, false)
        })
      }
      var obj = {
        userName: '',
        sex: '',
        telPhone: ''
      }
      this.detailTableData.push(obj)
    },
    // 编辑一行
    editDetailRow(index, row) {
      this.$set(this.showEdit, index, true)
    },
    // 确认编辑
    confirmDetailRow(index, row) {
      this.$set(this.showEdit, index, false)
    },
    //删除一行
    removeDetailRow(index, row) {
      this.$confirm('此操作将永久删除当前信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          this.detailTableData.splice(index, 1)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}