vue2中使用el-table实现直接编辑表格,鼠标点击空白处实现保存并传递给后端的简单方法

<el-table-column prop="remark" width="120px" label="备注" align="center">
  <template slot-scope="scope">
    <span v-if="!scope.row.setingFlag" @click="handleEdit(scope.row)">{{scope.row.remark}}</span>
    <div v-else>
      <el-input v-model="scope.row.remark" @blur="handleBlur(scope.row)"></el-input>
    </div>
  </template>
</el-table-column>
handleBlur(row) {
  row.setingFlag = false;
  // modify(param).then(res=>{
  //   if(res.code == 200){
  //     this.$message.success('修改数据成功!')
  //   }else{
  //     this.$message.error('获取数据失败!')
  //   }
  // })
},
handleEdit(row) {
  this.$set(row, 'setingFlag', true)
},

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-15 03:04:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-15 03:04:02       101 阅读
  3. 在Django里面运行非项目文件

    2024-06-15 03:04:02       82 阅读
  4. Python语言-面向对象

    2024-06-15 03:04:02       91 阅读

热门阅读

  1. mysql之数据聚合

    2024-06-15 03:04:02       26 阅读
  2. 协程库——面试问题

    2024-06-15 03:04:02       30 阅读
  3. MPLS的配置

    2024-06-15 03:04:02       31 阅读
  4. Vue3Cron组件

    2024-06-15 03:04:02       22 阅读
  5. 腾讯测试开发<ieg 实验室>

    2024-06-15 03:04:02       34 阅读
  6. Python函数

    2024-06-15 03:04:02       30 阅读
  7. Superset二次开发之调研篇 v3.0 VS v4.0

    2024-06-15 03:04:02       38 阅读
  8. 深入理解Spring相关注解

    2024-06-15 03:04:02       30 阅读
  9. console-service.yaml

    2024-06-15 03:04:02       27 阅读
  10. MyBatis基础

    2024-06-15 03:04:02       31 阅读
  11. python编程技巧使用lru_cache缓存计算结果

    2024-06-15 03:04:02       54 阅读
  12. LogicFlow 学习笔记——5. LogicFlow 基础 主题 Theme

    2024-06-15 03:04:02       31 阅读
  13. 使用rufus做Kali Linux时持久分区大小如何设置

    2024-06-15 03:04:02       34 阅读