avue-修改数据

1.页面要求

 2.知识点

修改数据保存回调rowUpdate方法,执行done关闭当前表单,loading用于添加失败后不关闭弹窗，重新提交

<template>
  <div id="my-component">
   <avue-crud :data="data" :option="option" @row-Update="rowUpdate"></avue-crud>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      data: [
        {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }
      ],
      option: {
        editBtn: false,
        delBth: false,
        addBtnText: '新增数据',
        addBtnIcon: 'el-icon-user',
        column: [
          {
            label: '姓名',
            prop: 'name'
          }, {
            label: '性别',
            prop: 'sex'
          }
        ]
      },
    };
  },

  methods: {
    rowUpdate(form, index, done, loading) {
      this.$message.success('模拟网络请求');
      setTimeout(() => {
        this.$message.success('关闭按钮等待');
        loading();
      }, 1000);
      setTimeout(() => {
        this.$message.success('新增数据' + JSON.stringify(form) + '数据序号' + index);
        done(form);
      }, 2000);
    }
  }
};

</script>

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

3.演示效果