elementui 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="操作" width="200">
          <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>

js部分：
//获得表格数据，增加一个参数statusBtn
if (res.data.success === true) {
            let arr = res.data.data
            for (let item of arr) {
              item['statusBtn'] = false
            }
            this.tableData = arr
}
// 判断值内容是否全部填写
    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 {
        for (let i of this.tableData) {
          if (i.statusBtn) return this.$message.warning("请先保存当前编辑项");
        }
        if (this.flagFun()) {
          this.tableData.push({ name: '', score: '', statusBtn: true })
        } else {
          this.$message({
            message: '名称和分数不能为空',
            type: 'warning'
          })
        }
      }
},
editCheck (row) {
      //点击修改 判断是否已经保存所有操作
      for (let i of this.tableData) {
        if (i.statusBtn && i.id != row.id) {
          this.$message.warning("请先保存当前编辑项");
          return false;
        }
      }
      row.statusBtn = true
      this.tableName = row.name
      this.tableScore = row.score
},
// 勾选弹框保存按钮
    sureCheck (row) {
      if (row.id !== '' && row.id !== undefined) {
        this.$http
          .post('', {
            name: this.tableName,
            score: this.tableScore,
            indicationId: this.keyId,
            id: row.id
          })
          .then(res => {
            if (res.data.success === true) {
              this.$message.success('编辑成功')
              this.tableName = ''
              this.tableScore = ''
              this.checkTable()
            } else {
              this.$confirm(res.data.msg, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
              }).then(() => {

              }).catch(() => {
                return false
              })
            }
          })
          .catch(function (error) {
            console.log(error)
          })
      } else {
        if (this.tableName === '' && this.tableScore === '') {
          Message.warning('请补全数据')
          return
        }
        this.$http
          .post('', {
            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()
            } 
          })
          .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('', {
                id: scope.row.id
              })
              .then(res => {
                if (res.data.success === true) {
                  this.$message.success('删除成功')
                  this.checkTable()
                }
              })
              .catch(function (error) {
                console.log(error)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }
}