avue中解决表单提交点击编辑弹框再次点击新增数据会将编辑数据代入新增弹框问题

avue框架的使用(二)

1.avue中解决表单提交点击编辑弹框再次点击新增数据会将编辑数据代入新增弹框问题(avue表格自带的弹框)

解决方式:

在方法beforeClose中使用,代码如下

beforeClose(done) {

//通过节点来控制

        this.$refs.crud.resetForm();

 },

2.点击编辑弹框保存之后,表单输入框全部被禁用问题解决

在保存成功之后使用done方法

done()

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,以下是使用 Avue 生成 vue 代 查询表单表单编辑表单数据显示成表格形式的示例代码: ```vue <template> <div> <avue-form :rule="rule" :option="option" :labelWidth="100" :inputWidth="200" @submit="handleSubmit" /> <avue-table :data="tableData" :columns="columns" :action="action" :option="option" :pagination="pagination" /> </div> </template> <script> export default { data() { return { rule: { name: [{ required: true, message: '请输入姓名', trigger: 'blur' }], age: [{ required: true, message: '请输入年龄', trigger: 'blur' }], address: [{ required: true, message: '请输入地址', trigger: 'blur' }] }, option: { submitBtn: { show: true, text: '查询' }, resetBtn: { show: true, text: '重置' } }, tableData: [], columns: [ { label: '姓名', prop: 'name', width: 100, edit: true }, { label: '年龄', prop: 'age', width: 100, edit: true }, { label: '地址', prop: 'address', width: 200, edit: true } ], action: { edit: { show: true, disabled: false, text: '编辑' }, delete: { show: true, disabled: false, text: '删除' }, custom: [{ show: true, disabled: false, text: '保存', event: 'save' }] }, pagination: { show: true, pageSize: 10, current: 1, total: 0 } } }, methods: { handleSubmit(data) { // 向后台发起数据查询请求 // 然后将查询结果赋值给 tableData this.tableData = [ { name: '张三', age: 20, address: '北京市海淀区' }, { name: '李四', age: 25, address: '上海市浦东新区' }, { name: '王五', age: 30, address: '广州市天河区' } ] this.pagination.total = this.tableData.length }, handleAction(event, row, index) { if (event === 'save') { // 向后台发起数据保存请求 // 然后提示保存成功 this.$message.success('保存成功') } } } } </script> ``` 在这个示例代码,我们使用 Avueavue-form 组件生成了一个查询表单,然后使用 avue-table 组件将查询结果以表格形式展示出来。在 avue-table 组件,我们设置了表格的列信息和操作信息,其列信息的 edit 属性设置为 true,表示该列可以编辑。当用户点击表格的保存按钮,我们触发一个自定义事件,并向后台发起数据保存请求。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值