前端那些事20240129-前端那些事-avue2不关弹框连续添加

最新推荐文章于 2024-09-09 21:14:24 发布

前端歌谣

最新推荐文章于 2024-09-09 21:14:24 发布

阅读量374

点赞数 7

文章标签：前端状态模式

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

版权

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

312 篇文章 1 订阅

订阅专栏

<avue-crud
  ref="crud"
  :data="data"
  v-model="form"
  @row-save="rowSave"
  :before-open="beforeOpen"
  :before-close="beforeClose"
  :option="option"
>
<template slot-scope="{row,index}" slot="menuForm">
    <el-button type="primary"
                     icon="el-icon-check"
                     size="small"
                     plain
                     v-if="type=='add'"
                     @click="handleNext()"
                    >继续添加</el-button>
  </template>
</avue-crud>


<script>
  export default {
    data() {
      return {
        form:{},
        flag:false,
        type:'',
        data: [],
        option:{
          align:'center',
          menuAlign:'center',
          viewBtn:true,
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    },
    methods: {
      handleNext(){
        this.flag=true;
        this.$refs.crud.rowSave()
      },
      rowSave(form,done,loading){
         this.data.push(this.deepClone(this.form))
         this.$message.success(JSON.stringify(this.form))
          if(this.flag){
            this.flag=false;
            loading()
            this.form.name="";
            this.form.sex="";
            return 
          }
          done()
      },
       beforeClose(done){
        this.flag=false;
        done()
      },
      beforeOpen(done,type){
        this.type=type;
        done()
          
      }
    }
  };
</script>