Vue 实现 html 表格 (grid) 单元格编辑功能 2

已于 2022-12-25 23:17:03 修改 1418 收藏 3
分类专栏： HTML JavaScript 文章标签： html vue.js javascript
于 2022-12-23 17:45:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yxp_xa/article/details/128422294
版权

第一版表格编辑实现是刚学VUE时硬凑出来 点击详见

经过网上的不断学习，代码精简功能增强，克服了上一个版本的两个bug。
欢迎没有下载积分的朋友欢迎复制转载。

主要功能：

  1. 由于取消了 vue 循环的 key 更新，故单元格不需要点击两次才能输入
  2. 单元格编辑时，绘制 td 边框来亮显太笨了，用 input 边框完美
  3. 表头禁止编辑、回车-数据编辑完成，ESC-取消数据编辑

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>html表格编辑示例</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <style>
        .xtable {
            width: 100%;
            border: 1px solid #aaa;
            border-collapse: collapse;
            table-layout: fixed;
        }
        .xtable td {
            height: 30px;
            border: 1px solid #aaa;
            text-align: center;
            vertical-align: middle;
            overflow: hidden;
            background-color: #f7f7f7;
        }
        input {
            box-sizing: border-box;
            text-align: center;
            border: 2px dotted #217346;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div id="app">
        <table class="xtable">
            <tr><td v-for="x in header">{{x}}</td></tr>
            <tr v-for="(va, r) in sheet">
                <td v-for="(v, c) in va" @click.self="rdEdit(r, c, $event)">{{v}}</td>
            </tr>
        </table>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: { 
                header: ['学号', '姓名', '性别', '成绩'],
                sheet: [['1', '张三', '男', 82], ['2', '李四', '女', 89], ['3', '王麻子', '男', 70]],
            },
            methods: {
                rdEdit: function (r, c, e) {
                    var iptObj = $("<input type='text'>");
                    var tdObj = $(e.target);      //拿到单元格DOM对象
                    var tdTxt = tdObj.html();     //拿到单元格的值
                    tdObj.html("");                     
                    iptObj.width(tdObj.width()).height(tdObj.height()).val(tdTxt)
                        .appendTo(tdObj)         // 插入到单元格对象
                        .trigger("select")
                        .blur(f => {
                            this.sheet[r][c] = f.target.value;  // 更新数据
                            tdObj.html(f.target.value);
                        })
                        .keyup(f => {   // 输入框对象的按键响应
                            if (13 == f.which) iptObj.blur();
                            if (27 == f.which) tdObj.html(tdTxt);
                        });
                }
            }
        })
    </script>
</body>
</html>

最后，发一个更简单的、功能十分强大的，用第三方插件实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>html表格编辑示例</title>
    <script src="https://unpkg.com/canvas-datagrid/dist/canvas-datagrid.js"></script>
</head>
<body>
    <div id="grid"></div>
    <script>
        var sheet = [['张三', '男', 82], ['李四', '女', 89], ['王麻子', '男', 70]];
        // 页面表格数据的改动，将自动同步到 grid.data
        var grid = canvasDatagrid({ parentNode: document.getElementById('grid'), data:sheet});
    </script>
</body>
</html>
阅读终点，创作起航，您可以撰写心得或摘录文章要点写篇博文。去创作
yxp_xa
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue+element实现sku表格
02-12
vue编写，基于elementUI实现的商品库存表格，添加属性和规格，自动生成对应表格
vue 可编辑表格
djh052900的博客
07-03 7119
基于vue2.0+element-ui的可编辑表格
Vue项目中grid布局的应用
trabecula_hj的博客
08-09 139
grid-template-areas用于定义区域，一个区域由单个或多个单元格组成,名字相同则表示在一个区域网格元素需要指定放置于哪一个grea-area区域中，不然会不生效。
Vue实现数据表格合并列rowspan效果
12-29
背景 现实中会遇到很多需求，合并列，例如要显示一个名学生的各门课程成绩。 html实现 使用html实现是比较简单的，利用table标签的rowspan属性即可，代码如下： 姓名 课程数 课程名称 成绩 张三 3 语文 100 </tr
vue+element-ui实现表格编辑的三种实现方式
10-17
主要介绍了vue+element-ui实现表格编辑的三种实现方式，主要有表格内部显示和编辑切换，通过弹出另外一个表格编辑和直接通过样式控制三种方式，感兴趣的小伙伴们可以参考一下
vue+element实现表格新增、编辑、删除功能
10-16
主要为大家详细介绍了vue+element实现表格新增、编辑、删除功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue开发在线表格
weixin_41463944的博客
11-09 864
vue开发在线表格
vue.js 加elementui实现输入表格
LIUHUA121的博客
05-11 8069
1 业务人员画的原型图需要该种table，但是原生的elementui并没有这种表格，对于我这种前端白痴来说，已经是非常难了。2 在大神指导下，有了初步了解，具体原理，因为对js不甚熟悉，只是会用基本的前端知识，所以此处不展开追究，后期有机会学习3 动态增加列，可以通过点击按钮，不断增加列4 仅以此记录，以便后期用到，可以提高工作效率以供参考 &lt;el-table ref="singleTab...
Vue表单输入
qq_44621394的博客
08-30 432
使用v-model后value或标签内的文字将不再生效。
vue实现表格合并功能
01-18
本文实例为大家分享了vue实现表格合并功能的具体代码，供大家参考，具体内容如下 1、背景 本身有vue进行渲染的数据表格，，但是出于整体考虑，需要对相同的列信息进行单元格合并。 由于使用的是vue，想到MVVM是要用...
使用Vue.js使用输入框向表格中添加内容
m0_66967833的博客
10-15 2489
通过输入框向表格添加内容
Vue实现表格批量审核功能实例代码
10-16
主要为大家详细介绍了Vue实现表格批量审核功能实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue-spreadsheet：内置在Vue.js中的简单电子表格
02-27
Vue电子表格 项目设置 npm install 编译和热重装以进行开发 npm run dev 怎么运行的： 基本用法 您可以使用键盘上的箭头键来选择一个单元格，也可以直接单击它。 按空格键或双击一个单元格进行编辑。 您也可以在单元格上单击鼠标右键（或在移动设备上按住鼠标键）以进行快速操作。 玩得开心！ 功能如何运作 函数的格式如下： =([row]-[column])±([row]-[column]) 所有功能必须以等号（ = ）开头。 接下来，您应该单击要用作第一个值的单元格（或者您可以如上例中所示写入其位置） 选择一个运算符（ +或- ）。 最后，以与选择第一个单元格相同的方式选择最后一个单元格。 去做： 当前，功能工具提示出现在当前单元格的下方，如果它直接位于工具提示的下方，则无法选择该单元格。
Vue 中的表格操作
it_xushixiong的博客
06-10 3159
在本文中，我们介绍了 Vue 中的表格操作的基本原理和用法。我们讲解了表格的基本用法，以及一些高级用法，如表格的排序、分页和筛选。我们给出了一些实例代码来帮助读者更好地理解。希望本文能对读者在实际开发中使用 Vue 操作表格有所帮助。
极致舒适的 Vue 可编辑表格
程序员成长指北
06-25 240
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群使用ElementPlus的Table啥都好，就是没有可编辑表格！！！????既然UI库不支持，那我们实现一个可编辑表格是很难的事么？????难么？????不难么？...个人觉得如果是业务固定的可编辑表格，使用ElementPlus实现都不难。但是如果需要的是一个通用的可编辑表格，这好像还真说不好。对于通用的可编辑...
vue 中使用 vxe-table 制作可编辑表格
lchmyhua88的博客
07-03 2081
element-ui-admin与vxe-table集成开发
vue 下使用 exceljs + x-spreadsheet 带样式导入Excel
lee576的专栏
11-20 2385
【说明】导入的Excel 字体颜色和背景色只能识别【标准色】,别的如"主题颜色"，exceljs 解析出来不是颜色值。导入的样式包括字体，字号，列宽，合并单元格，【部分能识别】的背景色，文字颜色。导入到 x-data-spreadsheet 如下图。原Excel样式如下。
顶级好用的 5 款 Vue table 表格组件测评与推荐
热门推荐
蒋川@卡拉云
01-24 1万+
Vue table 表格组件作为绝大多数项目需要内嵌的组件，可谓十分重要。表格看起来虽简单，实则坑很深，像搜索、排序、分页、无限加载等功能看起来很好实现，其实相当繁琐。选择适合自己项目应用场景的 Vue table ，会让项目开发事半功倍。在选择之前，我们要对市面上主流的 Vue table 表格组件有个全面了解，知道他们的优缺点，再根据自己项目的需求，有针对性的选择。 我试用了国内外主流 table 表格组件，测了一遍，筛掉长期不更新，bug 明显，社区活跃度低，功能单一的 table 表格组件，把最好
vue实现导入表格数据【纯前端实现】
水香木鱼
12-30 1829
vue纯前端实现导入表格功能。
ag-grid-vue cellEditingStarted时调整单元格样式
最新发布
08-27
### 回答1： 可以在 ag-grid-vue 的 "cellEditingStarted" 事件中使用 JavaScript 或 Vue 方法来更改单元格的样式。可以使用 getRowNode() 方法获取到编辑的行元素，然后使用 JavaScript 或 Vue 方法更改其 class 属性，实现单元格样式的更改。 例: ```javascript onCellEditingStarted(event) { let rowNode = this.gridApi.getRowNode(event.rowIndex); rowNode.setRowClass("editing-cell"); } ``` 其中, gridApi是ag-grid的api, setRowClass()是ag-grid的方法，editing-cell是你自定义的样式，可以在css中自己定义。 另外, 如果你在使用vue, 你可以使用 $refs 来访问ag-grid组件, 以及在vue中使用类似于上面的方法来更改样式。 ### 回答2： 当ag-grid-vue的cellEditingStarted事件被触发时，可以使用以下方法来调整单元格的样式： 1. 使用cellStyle属性：在数据绑定的表格列中，可以使用cellStyle属性来设置单元格的样式。在cellEditingStarted事件中，可以通过访问event参数对象来获取当前编辑单元格的行和列信息，然后根据这些信息来修改对应的单元格样式。 2. 使用cellClass属性：类似于cellStyle属性，也可以在数据绑定的表格列中使用cellClass属性来设置单元格的样式。在cellEditingStarted事件中，可以通过访问event参数对象来获取当前编辑单元格的行和列信息，然后根据这些信息来动态添加或移除对应的单元格样式。 例如，假设我们想要在单元格进入编辑模式时将其背景色设置为黄色，可以使用以下代码： ```vue <template> <div> <ag-grid-vue :columnDefs="columnDefs" :rowData="rowData" @cellEditingStarted="onCellEditingStarted" ></ag-grid-vue> </div> </template> <script> export default { data() { return { columnDefs: [ { headerName: 'Name', field: 'name', editable: true, cellStyle: this.cellStyle }, // 其他列... ], rowData: [ { name: 'John', age: 25 }, // 其他数据... ], }; }, methods: { onCellEditingStarted(event) { const { rowIndex, colDef } = event; // 根据需要调整的样式进行处理 // 例如将背景色设置为黄色 colDef.cellStyle = { backgroundColor: 'yellow' }; }, // 其他方法... }, }; </script> ``` 通过上述方法，在单元格进入编辑模式时，可以根据需要调整单元格的样式，从而实现界面效果的个性化定制。 ### 回答3： 在ag-rid-vue中，可以通过监听cellEditingStarted事件来实现调整单元格样式的功能。 首先，在gridOptions中设置onCellEditingStarted事件回调函数。例如： ``` <AgGridVue :gridOptions="gridOptions" ... /> ... data() { return { gridOptions: { ... onCellEditingStarted: this.onCellEditingStarted } } }, methods: { onCellEditingStarted(params) { // 根据具体需求调整单元格样式 params.node.setDataValue(params.column.colId, 'New Value'); params.node.setRowHeight(50); params.node.setDataValue('class', 'custom-class'); } } ``` 在onCellEditingStarted回调函数中，可以通过params参数获取到有关正在编辑的单元格的信息。例如，可以使用params.node获取到单元格所在的节点，然后通过节点对象的相关方法来调整样式。 params.node.setDataValue方法可以设置单元格的值，可以根据具体需求将单元格的值更改为自定义的值。 params.node.setRowHeight方法可以设置单元格所在行的高度，可以根据具体需求将行的高度调整为合适的值。 params.node.setDataValue('class', 'custom-class')可以为单元格添加自定义的样式类，可以根据具体需求给单元格添加自定义的样式。 通过以上方式，就可以在cellEditingStarted事件中实现对单元格样式的调整。对于更复杂的样式调整，可以结合CSS样式来实现更多的样式修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yxp_xa

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值