Element UI表格内容双击可编辑，失去焦点提交内容-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element UI表格内容双击可编辑，失去焦点提交内容。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

element-plus table 中双击实现编辑,javascript,前端,vue.js
需求就是双击列表中的某一cell，获取焦点时单元格变成input编辑框，失去焦点时如果内容有更改就触发修改的接口，如果内容无更改的话，就不触发。

1.首先给列表绑定双击事件

@row-dblclick="dbclick"

2.给单元格绑定 className 的回调方法，目的是获取选中单元格的行和列的index

:cell-class-name="tableCellClassName"

相关代码如下：
视图部分：

<el-table
  border
  v-loading="loading"
  :data="fingerList"
  @row-dblclick="dbclick"
  :cell-class-name="tableCellClassName"
>
  <el-table-column label="备注" align="center" prop="notes">
    <template slot-scope="scope">
      <!--v-if去判断双击的是不是当前单元格-->
      <el-input
        @blur="updateNotesValue(scope.row)"
        :ref="scope.row.index + ',' + scope.column.index"
        v-model="scope.row.newNotesValue"
        v-if="scope.row.index + ',' + scope.column.index == currentCell">
      </el-input>
      <span v-else>{{ scope.row.notes }}</span>
    </template>
  </el-table-column>
</el-table>

script部分：

export default {
	data() {
	    return {
	      // 用一个字符串来保存当前双击的是哪一个单元格
	      currentCell: null
	   }
	},
	methods: {
		// 给单元格绑定横向和竖向的index，这样就能确定是哪一个单元格
	    tableCellClassName({ row, column, rowIndex, columnIndex }) {
	      row.index = rowIndex;
	      column.index = columnIndex;
	    },
	    // 获得当前双击的单元格的横竖index，然后拼接成一个唯一字符串用于判断，并赋给currentCell
	    // 拼接后类似这样："1,0","1,1",
	    dbclick(row, column) {
	      this.currentCell = row.index + ',' + column.index;
	      // 这里必须要setTimeout，因为在点击的时候，input才刚被v-if显示出来，不然拿不到dom
	      setTimeout(() => {
	        // 双击后自动获得焦点
	        this.$refs[row.index + ',' + column.index].focus();
	        // row增加一个新的参数，将原先的值赋给新的参数，用来比较是否进行更改
	        this.$set(row, 'newNotesValue', row.notes)
	      })
	    },
	    // 当input失去焦点的时候，隐藏input, 将修改的内容传给后台
	    updateNotesValue(row) {
	      this.currentCell = null
	      // 比较这个单元格的值是否进行了更改，没有更改不进行任何操作，更改了才触发接口
	      if (row.notes !== row.newNotesValue) {
	        const params = { id: row.id, notes: row.newNotesValue }
	        updateNotes(params).then(res => {
	          this.msgSuccess('修改成功')
	          this.getList()
	        })
	      }
	    }
	}
}

借鉴此博客：链接：https://blog.csdn.net/weixin_44057991/article/details/124713407?spm=1001.2014.3001.5506文章来源地址https://www.toymoban.com/news/detail-762072.html

到了这里，关于Element UI表格内容双击可编辑，失去焦点提交内容的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！