关于iview中table组件实现编辑单元格功能

最新推荐文章于 2024-04-28 11:34:45 发布

flydesigner

最新推荐文章于 2024-04-28 11:34:45 发布

阅读量1.3w

点赞数 9

本文链接：https://blog.csdn.net/flydesigner/article/details/86480028

版权

本文介绍如何在iview 2.0版本的Table组件中实现单元格编辑功能。通过使用render函数和状态标识符切换显示文本与输入框，并结合表单验证，实现了点击单元格时数据的动态更新。示例代码展示了如何添加虚拟字段valid进行验证，以及在输入为空时显示错误提示。

摘要由CSDN通过智能技术生成

先上效果图：
在这里插入图片描述点击单元格，单元格变成输入框，可输入改变值鼠标从输入框移走时，输入框消失，值变化
上代码：

{
                        title: '姓名',
                        key: 'name',
                        render: (h, params) => { 
                            if (params.row.$isEdit) {
                              return h('Input', {
 
                                props: {
                                    type: "text",
                                    value: params.row.name
                                },
                                
                                on: {
                                  "on-blur": event => {
                                      debugger
                                      params.row.name = event.target.value;
                                      this.$set(params.row, '$isEdit', false);
                                  },
                                  
                                }
                              });