AVUE-新增数据方法

默认空白模版

<template>
  <div id="my-component">
   
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data () {
    return {
        };
  },
  
  methods: {
    
  },
  
};
</script>

<style lang="scss" scoped>
#my-component {
}
</style>

新增数据

代码部分

新增数据保存回调rowSave方法

执行done关闭当前表单

loading用于添加失败后不关闭弹窗，重新提交

<template>
  <div id="my-component">
   <avue-crud ref="crud" :data="data" 
   :option="option" @selection-change="selectionChange">
    <template slot="menuLeft" slot-scope="{size}">
    <el-button type="success" icon="el-icon-check" :size="size" @click="toggleAllSelection()">选中全部</el-button>
    <el-button type="success" icon="el-icon-check" :size="size" @click="toggleRowSelection(data[0])">选中第一行</el-button>
    <el-button type="success" icon="el-icon-check" :size="size" @click="toggleSelection([data[1]])">选中第二行</el-button>
    <el-button type="danger" icon="el-icon-delete" :size="size" @click="toggleSelection()">取消选择</el-button>
  </template>
   </avue-crud>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data () {
    return {
        data:[
            {
            id:1,
            name:'张三',
            sex:'男'
            },{
             id:2,
            name:'李四',
            sex:'女'
            }
        ],
        option:{
          selection: true,
          align:'center',
          menuAlign:'center',
            column:[
                {
                  label:'姓名',
                   prop:'name'
                },{
                     label:'性别',
                     prop:'sex'
                }
            ]
        },
    };
  },
  
  methods: {
      selectionChange(list){
        this.$message.success('选中的数据'+ JSON.stringify(list));
      },
      toggleAllSelection(){
        this.$refs.crud.$refs.table.toggleAllSelection();
      },
      toggleSelection(data){
        //传递数组进去，会勾选数组中的对象，如果已经勾选则会取消勾选
        this.$refs.crud.toggleSelection(data);
      },
      toggleRowSelection(row){
        //第一个参数为数据，第二个参数为是否勾选
        this.$refs.crud.toggleRowSelection(row,true);
      }
    }
  };
  

</script>

<style lang="scss" scoped>
#my-component {
}
</style>