1.页面要求
2.知识点
修改数据保存回调
rowUpdate
方法,执行done
关闭当前表单,loading
用于添加失败后不关闭弹窗,重新提交
<template>
<div id="my-component">
<avue-crud :data="data" :option="option" @row-Update="rowUpdate"></avue-crud>
</div>
</template>
<script>
export default {
name: 'MyComponent',
data() {
return {
data: [
{
id: 1,
name: '张三',
sex: '男'
}, {
id: 2,
name: '李四',
sex: '女'
}
],
option: {
editBtn: false,
delBth: false,
addBtnText: '新增数据',
addBtnIcon: 'el-icon-user',
column: [
{
label: '姓名',
prop: 'name'
}, {
label: '性别',
prop: 'sex'
}
]
},
};
},
methods: {
rowUpdate(form, index, done, loading) {
this.$message.success('模拟网络请求');
setTimeout(() => {
this.$message.success('关闭按钮等待');
loading();
}, 1000);
setTimeout(() => {
this.$message.success('新增数据' + JSON.stringify(form) + '数据序号' + index);
done(form);
}, 2000);
}
}
};
</script>
<style lang="scss" scoped>
#my-component {
}
</style>
3.演示效果