前端那些事20240201-前端那些事-avue2 增删改查方法新增数据

最新推荐文章于 2024-07-13 19:15:00 发布

前端歌谣

最新推荐文章于 2024-07-13 19:15:00 发布

阅读量337

点赞数 7

文章标签：前端

本文链接：https://blog.csdn.net/qq_41632427/article/details/135979307

版权

2024-vue2vue3-前端那些事专栏收录该内容

312 篇文章 1 订阅

订阅专栏

文章描述了一个使用Vue.js开发的CRUD（创建、读取、更新、删除）组件示例，展示了如何处理表单提交，模拟网络请求并在操作完成后给出反馈。

摘要由CSDN通过智能技术生成

<avue-crud :data="data" :option="option" @row-save="rowSave"></avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            id:1,
            name:'张三',
            sex:'男'
          }, {
            id:2,
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          editBtn:false,
          delBtn:false,
          addBtnText:'新增数据',
          addBtnIcon:'el-icon-user',
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    },
    methods: {
     rowSave(form,done,loading){
        this.$message.success('模拟网络请求')
        setTimeout(()=>{
          this.$message.success('关闭按钮等待');
          loading();
        },1000)
        setTimeout(()=>{
          this.$message.success('新增数据'+ JSON.stringify(form));
          done(form);
        },2000)
      }
    }
}
</script>