vue实现表格行内编辑

<template slot-scope="scope">
  <div>
    <el-button type="success" @click="addData">添加数据</el-button>
    <el-button type="success" @click="submitData">提交</el-button>
    <el-divider></el-divider>
    <el-table :data="tableData" border stripe style="width: 100%;">
      <el-table-column prop="name" label="姓名">
        <template slot-scope="scope">
          <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
          <span v-else>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别">
        <template slot-scope="scope">
          <el-select v-if="scope.row.edit" v-model="scope.row.sex" placeholder="请选择">
            <el-option label="男" value="1">男</el-option>
            <el-option label="女" value="2">女</el-option>
          </el-select>
          <span v-else>
            <p v-if="scope.row.sex == 1">男</p>
            <p v-if="scope.row.sex == 2">女</p>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.edit" type="text" size="medium" @click="confirmAdd(scope.row)">
            <i class="el-icon-check" aria-hidden="true">保存</i>
          </el-button>
          <div v-else>
            <el-button type="text" size="medium" @click="editData(scope.row)">
              <i class="el-icon-edit" aria-hidden="true">编辑</i>
            </el-button>
            <el-button type="text" size="medium" @click="deleteData(scope.row, scope.$index)">
              <i class="el-icon-delete" aria-hidden="true">删除</i>
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'Demo',
    data() {
      return {
        tableData: [],
      }
    },
    methods: {
      //添加
      addData() {
        this.tableData.push({
          edit: true,
        })
      },
      //确认添加
      confirmAdd(row) {
        row.edit = false
      },
      //修改
      editData(row) {
        row.edit = true
      },
      //删除
      deleteData(row, index) {
        this.tableData.splice(index, 1)
      },
      submitData() {
        alert(JSON.stringify(this.tableData))
      },
    },
  }
</script>

<style lang="scss" scoped></style>