el-table点击单元格自动聚焦可编辑，且失去焦点即修改成功的实现方法

前言

最近做的一个表格，有改某个单元格的需求，经过研究完美实现此功能，以下简要介绍下实现过程：

所用前端工具

element-ui官方文档
vue官方文档

效果图

实现过程

不拖泥带水，先看代码，想知道为什么要这样写的看下面讲解部分

<el-table:data="dataList"borderv-loading="loadingFlag"style="width: 100%;"size="small"@selection-change="selectChange"
><el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column><el-table-column type="index" align="center" label="序号" width="60"></el-table-column><el-table-columnalign="center"label="名称"min-width="120"><!--关键代码--><template slot-scope="scope"><el-input v-if="scope.row.isSelected" v-model="scope.row.name" @focus="focusEvent(scope.row)" @blur="blurEvent(scope.row)" v-focus></el-input><p @click="cellClick(scope.row)" v-else>{{scope.row.name}}</p></template></el-table-column><el-table-column label="地址" prop="mac" align="center"></el-table-column><el-table-column label="类型" prop="type" align="center"></el-table-column><el-table-column label="组" prop="group" align="center"></el-table-column><el-table-column label="域" prop="zoom" align="center"></el-table-column><el-table-column label="创建时间" prop="time" align="center"></el-table-column>
</el-table>

export default {data () {return {dataList: [],loadingFlag: true}},components: {PageTitle},directives: {focus: {inserted: function (el) {el.querySelector('input').focus()}}},created () {this.getList()},methods: {getList () {this.$http.get('/list').then(res => {if (res.status === 200) {this.loadingFlag = falsethis.dataList = res.data.map(item => {return {...item, isSelected: false}})console.log(this.dataList)}})},selectChange (e) {console.log(e)},focusEvent (row) {row.oldName = row.name},blurEvent (row) {row.isSelected = !row.isSelectedif (row.name !== row.oldName) {// 。。。此处代码省略（调用修改名称接口）this.$message({message: '修改成功',type: 'success',duration: 1000})}},cellClick (row) {row.isSelected = !row.isSelected}}
}

内容讲解

methods中getList方法在拿到后台数据后给数组对象每一项中添加了同一个属性isSelected,即：

this.dataList = res.data.map(item => {return {...item, isSelected: false}
})

有了isSelected属性后我们可以控制每一项名称的<el-input>和<p>标签的显示隐藏，从而来实现点击单元格即自动聚焦修改名称

<template slot-scope="scope"><el-input v-if="scope.row.isSelected" v-model="scope.row.name" @focus="focusEvent(scope.row)" @blur="blurEvent(scope.row)" v-focus></el-input><p @click="cellClick(scope.row)" v-else>{{scope.row.name}}</p>
</template>

focusEvent方法是为了记录用户聚焦该行前，该行的name值：

focusEvent (row) {row.oldName = row.name
},

失去焦点时，比较oldName和name是否相同

blurEvent (row) {// 目的是为了让<el-input>标签隐藏row.isSelected = !row.isSelectedif (row.name !== row.oldName) {// 。。。此处代码省略（调用修改名称接口）this.$message({message: '修改成功',type: 'success',duration: 1000})}
},

接下来要讲为什么要用自定义指令v-focus，当给<el-input>标签添加autofocus发现无效，然后看到网上提供的思路遂使用vue框架提供的directives：

directives: {focus: {inserted: function (el) {el.querySelector('input').focus()}}
},

目的就是为了在点击<p>标签的同时，显示<el-input>标签并使其聚焦
这里说明一下cellClick事件之所以加在<p>标签上是防止点击<el-input>时也触发cellClick事件,如果加在它们的父级上会出现我说的这种情况。

总结

之所以要写这篇文章，是因为当想实现这个功能的时候发现网上没有一个讲的好的例子，所以花点时间记录一下，好记性不如烂笔头，也希望可以帮助到需要的人，觉得不错的点个赞再走吧！

el-table点击单元格自动聚焦可编辑，且失去焦点即修改成功的实现方法相关推荐

Table 点击单元格编辑并获取对应的行列
如何进行编辑单元格数据: 在table中的td中加入contentEditable='true' 就可以进行编辑单元格了如何点击时获取单元格对应的行列: 在table中加入onclick事件列 ...
iview table点击单元格事件
点击事件 on: {click: () => {this.handleShow(params.row) //点击事件}} title设置 domProps: {title: params.row ...
【表格单元格可编辑】vue-elementul简单实现table表格点击单元格可编辑，点击单元格变成弹框修改数据
前言这是继我另一个帖子就是单元格点击变成输入框后添加的功能因为考虑到有些时候修改单元格的信息可能点击后要修改很多,那一个输入框不好用所以这时候就需要一个弹框可以把所有表单都显示出来修改所以这里 ...
element 表格点击单元格编辑，行合计
表格子组件代码 /* eslint-disable eqeqeq */ <template><el-table:data="gridData"sum-text=& ...
layui中table监听单元格_最全总结 | 聊聊 Python 办公自动化之 PPT（中）
点击上方 "AirPython",选择 "加为星标" 第一时间关注 Python 技术干货! 1. 前言上一篇文章简单地介绍了 PPT 的文档结构,并使用 p ...
html 拖拽选择表格,JS拖动选择table里的单元格完整实例【基于jQuery】
本文实例讲述了JS拖动选择table里的单元格.分享给大家供大家参考,具体如下: 用JS 实现类似Excel里面动态选择单元格的例子,从网上得到的例子,先记录在这里,以后参考用. www.jb51.n ...
WPF DataGrid通过点击单元格获取所在的行号
WPF DataGrid通过点击单元格获取所在的行号 private void DataGridCell_MouseDoubleClick(object sender, MouseButtonEven ...
CSS设置表格行列,给bootstrap table设置行列单元格样式
1.根据单元格或者行内其他单元格的内容,给该单元格设置一定的css样式 columns: [{ field: 'index', title: '序号', align:"center" ...
el-table 点击单元格可编辑点击表头可修改右击表头删除表头和内容
项目场景: 提示:这里简述项目相关背景: 点击单元格可编辑点击表头可修改表头内容 .右击表头删除内容和表头代码 html <template><div class="a ...
Ant Design Vue Table 组件合并单元格
Ant Design Vue Table 组件合并单元格项目开发中,有时候需要实现单元格合并的需求,这里记录一下在Ant Design Vue的实现. <template><div ...

el-table点击单元格自动聚焦可编辑，且失去焦点即修改成功的实现方法

前言

所用前端工具

效果图

实现过程

内容讲解

总结

el-table点击单元格自动聚焦可编辑，且失去焦点即修改成功的实现方法相关推荐

最新文章

热门文章