vxe-table 多条数据编辑后统一保存

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

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

页面效果如下(编辑前、编辑后): 

 vxe-table 多条数据编辑后统一保存_第1张图片

vxe-table 多条数据编辑后统一保存_第2张图片

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

vxe-table 多条数据编辑后统一保存_第3张图片

页面代码如下:

注:data为数据源

//HTML
保存 

      
      
      


//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)
        }
    }
}

 

 

你可能感兴趣的:(Vue系列,vxe-table)