vue 点击表格单元格可编辑

<el-table :data="tableList" @cell-click='getCell' :cell-class-name='getRowColumn'>

<el-table-columnprop="remark"label="备注"width="370"><template slot-scope='scope'><el-input v-model='scope.row.remark' v-if='scope.row.index == tabRowIndex  && scope.column.index == tabColumnIndex' @blur='inputBlur'></el-input><div v-else> {{scope.row.remark}}</div></template>
</el-table-column>

</el-table>

getCell (row, column, cell, event) {this.tabRowIndex = row.indexthis.tabColumnIndex = column.index
},
getRowColumn ({ row, column, rowIndex, columnIndex }) {row.index = rowIndexcolumn.index = columnIndex
},
inputBlur () {this.tabRowIndex = nullthis.tabColumnIndex = ''
},

vue 点击表格单元格可编辑相关推荐

【表格单元格可编辑】vue-elementul简单实现table表格点击单元格可编辑，点击单元格变成弹框修改数据
前言这是继我另一个帖子就是单元格点击变成输入框后添加的功能因为考虑到有些时候修改单元格的信息可能点击后要修改很多,那一个输入框不好用所以这时候就需要一个弹框可以把所有表单都显示出来修改所以这里 ...
vue+ElementUI el-table表格单元格编辑增加键盘事件功能(向上、向下、回车键盘事件)
1.此功能已集成到TTable组件中 2.最终效果 3.关键代码 // 键盘事件handleKeyup(event, index, key) {if (!this.isKeyup) returnthi ...
vue3实现表格单元格可编辑
以往编辑表格内容都是点击编辑按钮,进入编辑页面或弹窗对整行做编辑的效果. 而这次由于项目需要实现在表格内双击就能编辑对应单元格的功能,对于没有做过的我来说也是一个新挑战 . 需要达到的效果: 方案一 ...
前端：LayUi监听表格单元格，编辑后恢复原数据
{# edit是固定事件名,table_lay-filter是table原始容器的属性 lay-filter="对应的值" #}table.on('edit(course_tabl ...
elementui可编辑单元格_ElementUI table组件实现点击单元格可编辑
最近由于公司开始使用elementUI,但是我发现网上关于elementui的问题很少,只能靠看官方文档解决慢慢摸索,开发的过程中需要用到对表格的单元格进行编辑,百度也找不到,只好自己慢慢研究一下,下 ...
ligerui 表格中设置单元格不可编辑，添加行，删除行
一.需求:开发个表格grid用来显示维护线路段,出发地和目的地已经确定,需要维护中间路段二.解析: 1.既然出发地和目的地已经确定,那么出发地和目的地是不可以编辑的,因为附带有其他字段是可以编辑的, ...
el-table 点击单元格可编辑点击表头可修改右击表头删除表头和内容
项目场景: 提示:这里简述项目相关背景: 点击单元格可编辑点击表头可修改表头内容 .右击表头删除内容和表头代码 html <template><div class="a ...
layui编辑表格单元格
在日常的学习或开发后台管理这一块时,很多时候会有表格中的单元格可编辑操作.下面我们来了解一下关于layui.table中的单元格编辑事件: 在layui.table数据表格文档中-cols表头参数一览 ...
ElementUI table组件，表格组件，单击单元格可编辑逻辑
ElementUI table组件,表格组件,单击单元格可编辑逻辑 1.表格部分 <el-table:data="seatDataFilter"@cell-click=&qu ...

vue 点击表格单元格可编辑

vue 点击表格单元格可编辑相关推荐

最新文章

热门文章