avue2.1.0 avue-crud 复制按钮怎样调用弹框

原创已于 2025-04-03 15:10:30 修改

· 1.4k 阅读

2 ·

版权

文章标签：

#vue.js #vue

于 2021-04-27 17:25:50 首次发布

avue-低版本copyBtn 专栏收录该内容

1 篇文章

订阅专栏

在avue2.1.0版本的vue项目中，由于复制按钮功能仅在2.6版本及以上提供，因此需要通过编辑按钮进行操作模拟复制。通过绑定ref并自定义handleIssueA方法，利用编辑按钮触发复制所需的操作，最终实现了类似复制的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

avue2.1.0 avue-crud 怎样添加复制按钮

- 新的改变

vue项目里的avue是2.1.0版本的,但是复制按钮是2.6版本才有的. 所以呢, 项目里用不了,只能利用编辑按钮来进行操作

新的改变

这是vue项目里的avue-crud ,绑定了ref

<avue-crud :page="page" @size-change="onSizeChange" @current-change="onCurrentChange" 
    v-model="form" :data="data" ref="crud"
     @refresh-change="refreshData" 
     @row-save="onSave" 
     @row-update="onUpdate" 
     @row-del="onDel" 
     :option="option">
      <template slot-scope="scope" slot="userNameForm">
        <userData @onChangeUser="onChangeUser" :form="form" :props=" { value:'userName' } " :params="{}" />
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button type="primary"
                     icon="el-icon-check"
                     size="small"
                     plain
                     @click.stop="handleDesign(scope.row,scope.index)">设计</el-button>
      </template>
      <template slot-scope="scope" slot="menuBtn">
        <el-dropdown-item divided @click.native="handleIssue(scope.row)">发布</el-dropdown-item>
        <el-dropdown-item divided @click.native="handleIssueA(scope.row,scope.index)">复制</el-dropdown-item>
      </template>
    </avue-crud>

重点看handleIssueA方法, 这里要调用绑定的实例, 利用编辑按钮做跳板

 //复制
      handleIssueA(row, index){
        console.log(row,index)
        this.$set(row, 'copy', true)
        this.$refs.crud.rowEdit(row, index)
      },
      //编辑数据后确定触发该事件
    onUpdate(row, index, done, loading){
      console.log('done',done)
      this.saveData('update',row, done, loading)
    },
    saveData(type,row, done, loading){
      let api=""
      let para = {}
      if(row.copy) {
        type = 'update'
      }
      if(type==='add'){
        api="review/lpaReviewPlanTemplate/add"
        para = {
          name:row.name,
          reviewTypePid:this.bigTypeId,//大类id
          fullOrgCode:this.fullOrgCode,//组织代码拼接
          reviewTypeCid:this.auditTypeId,
          currentPage: this.page.currentPage,
          pageSize: this.page.pageSize,
          orgCode:this.departmentName,
        }
        console.log('this.auditTypeId',this.auditTypeId)
        console.log('this.departmentName',this.departmentName)
        console.log('this.page',this.page)
        this.sy.request(api,para,res=>{
          done()
          this.$message.success('新增成功！')
          this.getTableData()
        },err=>{
          loading()
        })
        this.$set(row,'name',row.name)
      }else if(type == 'update'){
        if(row.copy) {
          api="review/lpaReviewPlanTemplate/copy"   
          console.log('row',row)
          this.sy.request(api,row,res=>{
            done()
            this.$message.success('复制成功！')
            this.getTableData()
          },err=>{
            loading()
          })
          // this.$set(row,'name',row.name)
          this.getTableData();
        }else{
          api="review/lpaReviewPlanTemplate/update"
          console.log('row',row)
          this.sy.request(api,row,res=>{
            done()
            this.$message.success('保存成功！')
            this.getTableData()
          },err=>{
            loading()
          })
          // this.$set(row,'name',row.name)
          this.getTableData();
        }
      }else{
        api="review/reviewPlanFounder/update"
        this.sy.request(api,para,res=>{
          done()
          this.$message.success('修改成功！')
          this.getTableData()
        },err=>{
          loading()
        })
        this.getTableData();
      }
    },

最后效果:
在这里插入图片描述