vxe-table表格组件,编辑单元格详解(el-table组件同样适用)

更新时间：2025年04月24日 10:19:12 作者：lswlovejrd

这篇文章主要介绍了vxe-table表格组件,编辑单元格详解(el-table组件同样适用),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vxe-table表格组件,编辑单元格(el-table组件同样适用)

vxe-table官网：https://vxetable.cn/#/table/api

效果：

点击一个单元格时，可编辑该单元格

通过属性edit-config设置编辑单元格：

       <vxe-table
            :tableData="tableData"
            :columns="columns"
            :edit-config="{trigger: 'click', mode: 'cell'}"
        >
        </vxe-table>

trigger：触发方式，click为单击触发编辑，dblclick为双击触发编辑，manual为手动触发方式（只能用于 mode=row）
mode：编辑模式，cell为单元格编辑模式，row为行编辑模式

另外，还有许多其他属性可以设置，详细参见官网

js部分的代码：

export default {
    data(){
        return {
            month: "",
            tableData:[],  //你要写入的数据
            columns:[
                {field: 'age', title: '年龄',minWidth:90,align:'center',editRender: {name: '$input', props: { type: 'number' },enabled:true}},
            ],
        }
    },

这部分主要的代码是：

editRender: {name: '$input', props: { type: 'number' },enabled:true}}

解释：

name: '$input' //单元格编辑采用输入框的形式。如果要是需要选择框的形式，则设置为$option，其它形式同上。
props: { type: 'number' } //以数字输入，如果是以文本输入，则：type: 'text'
enabled:true //是否可编辑

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue2如何实现vue3的teleport
这篇文章主要介绍了vue2如何实现vue3的teleport，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
单页面Vue页面刷新出现闪烁问题及解决
这篇文章主要介绍了单页面Vue页面刷新出现闪烁问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
解决Element-ui radio单选框label布尔/数值的一个坑
这篇文章主要介绍了解决Element-ui radio单选框label布尔/数值的一个坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
深入探讨Vue3实现多数据变化监听的方式
随着 Vue 3 的发布,框架带来了更多的新特性和增强,其中之一就是 watch 函数的升级,这一改进使得多个数据的变化侦听更加优雅和灵活,本文将深入探讨 Vue 3 中的 watch 函数,以及如何以更加优雅的方式实现对多个数据变化的监听
2023-08-08
前端Vue全屏screenfull通用解决方案及原理详细分析
这篇文章主要给大家介绍了关于前端Vue全屏screenfull通用解决方案及原理的相关资料,使用screenfull这一第三方库可以实现更稳定的全屏功能,需要的朋友可以参考下
2024-10-10
vue3 ref获取组件实例详细图文教程
在Vue3中可以使用ref函数来创建一个响应式的变量,通过将ref函数应用于一个组件实例,我们可以获取到该组件的实例对象,这篇文章主要给大家介绍了关于vue3 ref获取组件实例的详细图文教程,需要的朋友可以参考下
2023-10-10
Element ui中menu组件(el-menu/el-menu-item/el-submenu/template)
最近在使用Element开发时遇到了不少问题,下面这篇文章主要给大家介绍了关于Element ui中menu组件(el-menu/el-menu-item/el-submenu/template)层级结构与用法的相关资料,需要的朋友可以参考下
2022-12-12
vue的插槽原来该这样理解
这篇文章主要为大家详细介绍了vue的插槽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
vue项目打包开启gzip压缩具体使用方法
这篇文章主要为大家介绍了vue项目打包开启gzip压缩具体使用方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
在Vue3中使用vue3-print-nb实现前端打印功能
在前端开发中,经常需要打印页面的特定部分,比如客户列表或商品详情页,要快速实现这些功能,可以使用 vue3-print-nb 插件,本文就给大家介绍了如何在 Vue 3 中使用 vue3-print-nb 实现灵活的前端打印,需要的朋友可以参考下
2024-06-06