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 //是否可编辑

总结

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

您可能感兴趣的文章:

Vue实现剪贴板复制功能
这篇文章主要介绍了Vue实现剪贴板复制功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-12-12
vue-amap安装和用法步骤
vue-amap是饿了么开源的一套基于 Vue 2.0 和高德地图的地图组件。接下来通过本文给大家介绍vue-amap安装和使用,需要的朋友可以参考下
2021-12-12
Vue3 封装扩展并简化Vuex在组件中的调用问题
这篇文章主要介绍了Vue3 封装扩展并简化Vuex在组件中的调用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-01-01
vue如何使用vue slot封装公共组件
这篇文章主要介绍了vue如何使用vue slot封装公共组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
uniapp中如何基于vue3实现输入验证码功能
本文介绍了如何使用uniapp和vue3创建一个手机验证码输入框组件,通过封装VerificationCodeInput.vue组件,并在父组件中引入,可以实现验证码输入功能,适合需要增加手机验证码验证功能的开发者参考使用
2024-09-09
Vue父子传递实例讲解
在本篇文章里小编给大家整理的是关于Vue父子传递实例讲解，需要的朋友们可以跟着学习参考下。
2020-02-02
vue3+vite使用环境变量.env的一些配置情况详细说明
开发中经常会使用环境变量,Vite相比于Webpack也有一定的变化,下面这篇文章主要给大家介绍了关于vue3+vite使用环境变量.env的一些配置情况说明的相关资料,需要的朋友可以参考下
2022-12-12
详解Vue路由开启keep-alive时的注意点
这篇文章主要介绍了详解Vue路由开启keep-alive时的注意点，非常具有实用价值，有兴趣的朋友可以了解一下
2017-06-06
详解给Vue2路由导航钩子和axios拦截器做个封装
本篇文章主要介绍了详解给Vue2路由导航钩子和axios拦截器做个封装，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
vue.js修改el-popover组件显示位置
el-popover是一个基于element-ui框架设计的,用于浮动展示提示或菜单的UI组件,下面这篇文章主要给大家介绍了关于vue.js修改el-popover组件显示位置的相关资料,需要的朋友可以参考下
2023-06-06