热门标签
热门文章
- 1【软考-中级】系统集成项目管理工程师-【4 项目管理一般知识】_软考中级组织结构在第几章
- 2python cms建站教程：Wagtail建站（一、安装与基本使用）
- 3css属性阻止鼠标事件及鼠标指针的显示_css 让子元素不响应鼠标
- 4Springboot整合JavaMail(发送邮件)_spring boot javamailsender yml配置
- 5基于System Verilog的同步FIFO实现(一)_system verilog fifo
- 6【黑客】利用VBS脚本让QQ永远在线,等级速升
- 7使用 TensorRT 加速深度学习推理
- 8Linux rabbitMQ 单机部署，集群部署_linux 环境下rabbitmq 二进制源码安装包 集群部署详解
- 9Scrapy 分布式爬虫：基本概念及框架_分布式网络爬虫框架 scrapy
- 10【hadoop】集群搭建之部署mysql并远程访问（连接）_hadoop部署mysql
当前位置: article > 正文
vue+element表格使用（单元格内编辑、表格后新增一行、删除表格行）_cell-dblclick获取选中
作者：小蓝xlanll | 2024-04-25 16:20:41
赞
踩
cell-dblclick获取选中
element组件生成表格
前端使用element组件实现表格创建，开发文档中有一个单元格点击事件cell-dblclick——当某个单元格双击时触发该事件。通过使用该事件实现单元格可编辑。表格后新增一行的逻辑很简单，直接添加一行表格数据就行。删除表格行的逻辑也很简单，通过获取选中行和表格数据进行比较，如果相等（即被选中）则从tableData中删除该条数据。
具体实现逻辑如下：
<div id="app"> <template> <el-table :data="tableData" border @selection-change="selectionChangeHandle" @cell-dblclick="celledit" style="width: 671px;height:243px"> <el-table-column> <template slot="header" slot-scope="scope"> <el-button @click="addRow()">新增</el-button> <el-button @click="batchDelete(tableDataSelections)">删除</el-button> </template> <el-table-column type="selection" width="55"></el-table-column> <el-table-column type="index" ></el-table-column> <el-table-column prop="date" label="日期" width="180"> <template slot-scope="scope"> <el-date-picker v-if="scope.row.date.edit" v-model="scope.row.date.value" ref="date" style="width: 100%" type="date" value-format="yyyy-MM-dd" @blur="scope.row.date.edit = false"> </el-date-picker> <span v-else>{{ scope.row.date.value }}</span> </template> </el-table-column> <el-table-column prop="name" label="姓名" width="180" edit="false"> <template slot-scope="scope"> <el-input v-if="scope.row.name.edit" ref="name" v-model="scope.row.name.value" style="width: 100%" @blur="scope.row.name.edit = false"> </el-input> <span v-else>{{ scope.row.name.value }}</span> </template> </el-table-column> <el-table-column prop="address" width="260" label="地址"> <template slot-scope="scope"> <el-input v-if="scope.row.address.edit" ref="address" v-model="scope.row.address.value" style="width: 100%" @blur="scope.row.address.edit = false"> </el-input> <span v-else>{{ scope.row.address.value }}</span> </template> </el-table-column> </el-table-column> </el-table> </template> </div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
对应的实现方法
export default { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄', edit: false }], tableDataSelections:[]//选中的表格数据 } }, created(){ this.formatData() }, methods: { //表格数据格式化成我们想要的数据 /* { date: { value: '', edit: false//编辑状态 } } */ formatData(){ this.tableData.forEach(item => { for(let key in item) { item[key] = { value: item[key], edit: false } } }) }, //表格新增行 addRow() { this.tableData.push({ date: { value: "", edit: true }, name: { value: "", edit: true }, address: { value: "", edit: true } }); }, // 多选 selectionChangeHandle(val) { this.equipmentDataSelections = val; }, //删除选中数据（单纯实现前端删除） batchDelete(selections) { if (selections.length > 0) { this.$confirm(`确定删除选中数据?`, "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => { for (let i = 0; i < selections.length; i++) { for (let y = 0; y < this.tableData.length; y++) { if (this.tableData[y] == selections[i]) { this.tableData.splice(y, 1); break; } } } }).catch(() => {}); } }, //单元格双击事件 celledit(row, column, cell, event){ if(row[column.property]){ row[column.property].edit = true setTimeout(() => { this.$refs[column.property].focus() }, 20) } } } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/486169
推荐阅读
- html><html>
[详细] -->赞
踩
相关标签
