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就是这行数据的全部内容,可以轻易获取到拿来做别的事情。
本文介绍了在使用Avue框架时,如何在默认的ROWSAVE函数中获取ROW参数,以便进行自定义功能扩展。通过在表单中添加自定义按钮并绑定方法,可以获取到表单的全部填写数据。同样,在表格中利用SCOPE也能获取到行数据,为增删改查操作提供便利。
6万+

被折叠的 条评论
为什么被折叠?



