vue+elementui el-table增删改查

<el-button @click="addRow()" type="success" icon="el-icon-plus" style="margin-bottom:10px;" size="mini">添加勾选项</el-button>
<el-table :data="tableData" style="width: 100%" border size='small'>
   <el-table-column label="名称">
      <template slot-scope="scope">
         <span v-if="scope.row.statusBtn===false">{{scope.row.name}}</span>
         <el-input size="mini" v-else-if="scope.row.statusBtn===true" v-model="tableName"> 
         </el-input>
       </template>
   </el-table-column>
          
   <el-table-column label="分数">
       <template slot-scope="scope">
         <span v-if="scope.row.statusBtn===false">{{scope.row.score}}</span>
         <el-input type="number" v-else-if="scope.row.statusBtn===true" size="mini" v-model="tableScore"></el-input>
       </template>
    </el-table-column>
    <el-table-column label="操作">
       <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editCheck(scope.row)"
              v-if="scope.row.statusBtn===false" icon="el-icon-edit" >编 辑</el-button>
          <el-button type="success" size="mini" @click="sureCheck(scope.row)"
              v-else-if="scope.row.statusBtn===true" icon="el-icon-check">保 存</el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteFun(scope)">删除</el-button>
        </template>
    </el-table-column>
</el-table>

// 判断值内容是否全部填写
    flagFun() {
      const flag = this.tableData.every(item => {
        if (item.name !== '' && item.score !== '') {
          return true
        } else {
          return false
        }
      })
      return flag
    },
    addRow() {
      if (this.tableData.length === 0) {
        this.tableData.push({ name: '', score: '', statusBtn: true })
      } else {
        if (this.flagFun()) {
          this.tableData.push({ name: '', score: '', statusBtn: true })
        } else {
          this.$message({
            message: '名称和分数不能为空',
            type: 'warning'
          })
        }
      }
},
editCheck(row) {
      row.statusBtn = true
      this.tableName = row.name
      this.tableScore = row.score
},
// 勾选弹框保存按钮
sureCheck(row) {
      // console.log(row)
      if (row.id !== '' && row.id !== undefined) {
        this.$http
          .post('url', {
            name: this.tableName,
            score: this.tableScore,
            id: row.id
          })
          .then(res => {
            if (res.data.success === true) {
              this.$message.success('编辑成功')
              this.tableName = ''
              this.tableScore = ''
              this.checkTable()
            } else {
              this.$message.warning(res.data.msg)
            }
          })
          .catch(function(error) {
            console.log(error)
          })
      } else {
        // console.log(row.id + 'add')
        if (this.tableName === '' && this.tableScore === '') {
          Message.warning('请补全数据')
          return
        }
        this.$http
          .post('url', {
            name: this.tableName,
            score: this.tableScore,
            indicationId: this.keyId
          })
          .then(res => {
            if (res.data.success === true) {
              row.statusBtn = false
              this.$message.success('保存成功')
              this.tableName = ''
              this.tableScore = ''
              this.checkTable()
            } else {
              this.$message.warning(res.data.msg)
            }
          })
          .catch(function(error) {
            console.log(error)
          })
      }
},
checkTable() {
      this.$http.get('url?indicationId=' +this.keyId).then(res => {
          if (res.data.success === true) {
            let arr = res.data.data
            for (let item of arr) {
              item['statusBtn'] = false
            }
            this.tableData = arr
          } else {
            this.$message.warning(res.data.msg)
          }
        })
        .catch(function(error) {
          console.log(error)
        })
},
// 删除一行
deleteFun(scope) {
      if (!scope.row.id) {
        this.tableData.splice(scope.$index, 1)
      } else {
        this.$confirm('确认是否删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        })
          .then(() => {
            this.$http.post('url', {id: scope.row.id}).then(res => {
                if (res.data.success === true) {
                  this.$message.success('删除成功')
                  this.checkTable()
                } else {
                  this.$message.warning(res.data.msg)
                }
              })
              .catch(function(error) {
                console.log(error)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }
}