Avue 默认新增方法ROWSAVE函数中ROW的获取

本文链接：https://blog.youkuaiyun.com/gogonnx/article/details/115655812

本文介绍了在使用Avue框架时，如何在默认的ROWSAVE函数中获取ROW参数，以便进行自定义功能扩展。通过在表单中添加自定义按钮并绑定方法，可以获取到表单的全部填写数据。同样，在表格中利用SCOPE也能获取到行数据，为增删改查操作提供便利。

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

Avue 默认新增方法ROWSAVE函数中ROW的获取
最近在使用AVUE时，使用默认的新增快速搭建表单做基本的增删改查工作十分便捷，再进一步工作时，希望修改默认方法做一些功能，又十分懒不愿意重写，多次尝试在大神指引下得到一个获取默认封装参数ROW的方法，当然其他的参数也可以用这个思想

表单里面的默认参数获取

<template slot="menuLeft">
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          v-if="permission.broker_delete"
          @click="handleDelete"
          >删 除
        </el-button>
      </template>
      <template slot-scope="scope" slot="menuForm">
        <el-button type="primary" icon="el-icon-check" size="small" @click="testconnect()"
          >测试连接</el-button
        >
      </template>

先添加一个自定义按钮，可以在自动生成的页面上加上自己的按钮。
然后添加相关方法

 testconnect() {
      this.$message.success('新增数据' + JSON.stringify(this.$refs.crud.$refs.dialogForm.value));
      }

这一段中可以看到，this.$refs.crud.$refs.dialogForm.value就是获取当前表单中全部填写的数据的方法。
2. 表格中的默认参数获取

<template slot-scope="scope" slot="menu">
        <el-button
          type="primary"
          icon="el-icon-check"
          size="small"
          plain
          @click.stop="handleEdit(scope.row, scope.index)"
          >编辑</el-button
        >
      </template>

还是在表格中添加一个自定义的编辑按钮，在表格里面使用slot-scope="scope" 之后就可以在SCOPE中找到自己需要的绝大多数参数scope.row就是这行数据的全部内容，可以轻易获取到拿来做别的事情。