el-table表格中实时修改某一行的字段

最新推荐文章于 2025-05-06 21:45:00 发布

fangcaojushi

最新推荐文章于 2025-05-06 21:45:00 发布

阅读量1.5k

点赞数 5

分类专栏： vue.js 文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/fangcaojushi/article/details/136900755

版权

vue.js 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一种在Vue应用中实现招生跟进学生表格编辑的方法，通过添加随机键值、双击事件和失焦处理来控制文本框的显示与数据保存。使用了ElementUI的`el-table`组件进行渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目需求

招生跟进的学生，在表格中编辑跟踪记录，修改失去焦点后保存，
在这里插入图片描述

实现方法

原理

表格上加上::key取值为随机数，key: Math.random(), 单元格的双击事件加上方法@cell-dblclick=“doubleClick”
在这里插入图片描述
表格的内容为多选的文本框，默认情况不显示，当scope.row[scope.column.property + ‘Show’]的列属性为真时显示，失去焦点时将该属性在置为假

视图代码，

代码如下：表格的代码片断

<!--表格渲染-->
<el-table ref="table" :key="key" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @cell-dblclick="doubleClick" :cell-class-name="addSeparate"
 :header-cell-class-name="addSeparate" @selection-change="crud.selectionChangeHandler">
 <el-table-column prop="trackRecord" label="跟踪记录" width="300">
    <template slot-scope="scope">
      <el-input v-if="scope.row[scope.column.property + 'Show']" v-model="scope.row.trackRecord" autosize clearable type="textarea" :rows="3" @blur="onBlur(scope.row, scope.column)" />
      <span v-else style="white-space: pre-wrap;">{{ scope.row.trackRecord }}</span>
    </template>
  </el-table-column>

script 代码片断

// 双击单元格触发事件
    doubleClick(row, column) {
      // 避免点击过快导致多个输入框处于焦点状态
      row[column.property + 'Show'] = false

      // 避免点击其他单元格导致表格刷新
      if (!['trackRecord'].includes(column.property)) return
      row[column.property + 'Show'] = true
      this.updateTable()
    },
    // 输入框失焦事件
    onBlur(row, column) {
      row[column.property + 'Show'] = false
      this.updateTable()
      // 请求后台更改数据
      crudBizIntendedStudent.edit(row).then(() => {
        this.crud.notify('编辑成功', 'success')
      }).catch(err => {
        this.crud.notify(err.data.message)
      })
    },
    // 更新表格
    updateTable() {
      this.key = Math.random()
    },