vxe-table 多条数据编辑后统一保存_vxe-table getupdaterecords-CSDN博客

本文介绍如何使用Vxe-Table实现表格数据的多行编辑及统一保存功能，通过实例展示编辑前后页面效果，提供代码示例，包括HTML结构与JavaScript逻辑，适用于前端开发者学习与实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vex-table地址：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/install

需求：表格多行数据编辑后进行统一保存

页面效果如下（编辑前、编辑后）：

点击后保存后的数据格式：

页面代码如下：

注：data为数据源

//HTML
<el-button type="primary" @click="save()">保存</el-button> 
<vxe-table border height="100%" stripe highlight-hover-row :data="dataList" :edit-config="{trigger: 'click', mode: 'row', showStatus: true}" ref="xTable">
      <vxe-table-column field="name" title="姓名" width="180" fixed="left"></vxe-table-column>
      <vxe-table-column field="sex" title="性别" width="130"></vxe-table-column>
      <vxe-table-column field="age" title="年龄" :edit-render="{name: 'input', attrs: {type: 'number'}}" width="130">
</vxe-table-column>
</vxe-table>

//JS
export default {
     data(){
        return {
            dataList: [{
                id: '01',
                name: '测试1',
                age:'20',
                sex:'女'
            },{

                id: '02',
                name: '测试2',
                age:'22',
                sex:'男'
            }]
        }
    },
    methods:{
          save(){
            let updateRecords = this.$refs.xTable.getUpdateRecords()
            console.log(updateRecords)
        }
    }
}