vue element ui表格行编辑功能 新增和修改

<div>
<el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期">
      <template slot-scope="scope">
        <el-date-picker
          v-model="scope.row.date"
          v-if="scope.row.id==editId"
          value-format='yyyy-MM-dd'
          type="date"
          placeholder="选择日期">
        </el-date-picker>
        <span v-else>{{scope.row.date}}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名">
      <template slot-scope="scope">
        <el-input v-if="scope.row.id==editId" v-model="scope.row.name"></el-input>
        <span v-else>{{scope.row.name}}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="省份">
      <template slot-scope="scope">
        <el-input v-if="scope.row.id==editId" v-model="scope.row.province"></el-input>
        <span v-else>{{scope.row.province}}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="市区">
      <template slot-scope="scope">
        <el-input v-if="scope.row.id==editId" v-model="scope.row.city"></el-input>
        <span v-else>{{scope.row.city}}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="地址">
      <template slot-scope="scope">
        <el-input v-if="scope.row.id==editId" v-model="scope.row.address"></el-input>
        <span v-else>{{scope.row.address}}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="邮编">
      <template slot-scope="scope">
        <el-input v-if="scope.row.id==editId" v-model="scope.row.zip"></el-input>
        <span v-else>{{scope.row.zip}}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="操作">
      <template slot-scope="scope">
        <el-button type="text" v-if="scope.row.id!=editId" @click="handleClick(scope.row)" size="small">查看</el-button>
        <el-button type="text" v-if="scope.row.id!=editId" @click="changeClick(scope.row)" size="small">编辑</el-button>
        <el-button type="text" v-if="scope.row.id!=editId" @click="delClick(scope.row)" size="small">删除</el-button>
        <el-button type="text" v-if="scope.row.id==editId" @click="cancelClick(scope.row)" size="small">取消</el-button>
        <el-button type="text" v-if="scope.row.id==editId" @click="saveClick(scope.row)" size="small">保存</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button @click="add">新增</el-button>
  </div>

data () {
    return {
      editData:[],  //编辑行初始数据
      editId:'',  //判断编辑的是哪一行
      tableData: [{
        id:'1',
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        id:'2',
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        id:'3',
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        id:'4',
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }]
    }
  },

    delClick(row){
      //删除接口 成功以后 this.editId = ''
    },
    cancelClick(row){
      if(row.id){
      	for(let i in row){
          row[i] = this.editData[i]
        }
        this.editId = ''
      }else{
        this.tableData.forEach((item,index)=>{
          if(item.id == ''){
            this.tableData.splice(index,1)
          }
        })
      }
    },
    saveClick(row){
      //保存接口 成功以后 this.editId = ''
    },
    changeClick(row){
      if(this.tableData.some((item)=>{
       return item.id==''
      })){
        this.$message({
          message: '请先保存',
          type: 'warning'
        });
        return
      }
      this.editData = JSON.parse(JSON.stringify(row))    //把当前行数据存一份，取消的时候行数据还原
      this.editId = row.id
    },
    handleClick(row) {
      console.log(row);
    },
    add(){
      if(this.editId!=''){
        this.$message({
          message: '请先保存',
          type: 'warning'
        });
        return
      }
      if(this.tableData.some((item)=>{
       return item.id==''
      })){
        this.$message({
          message: '请先保存',
          type: 'warning'
        });
        return
      }
      this.tableData.push(
        {
          date: '',
          name: '',
          province: '',
          city: '',
          address: '',
          zip:'',
          id:'',
        }
      )
    }

其他根据自己的需求做调整