方法

TIP

1.0.0+

普通用法

方法 - 图1

点击不用的按钮回调不用的方法,点击删除回调row-del方法,保存新数据回调rowSave方法,修改数据回调row-update方法,刷新回调refresh方法

  1. <avue-crud :data="data" :option="option"
  2. @row-save="rowSave"
  3. @row-update="rowUpdate"
  4. @row-del="rowDel"
  5. @refresh-change="refresh"></avue-crud>
  6. <script>
  7. export default {
  8. data() {
  9. return {
  10. data: [
  11. {
  12. name:'张三',
  13. sex:'男'
  14. }, {
  15. name:'李四',
  16. sex:'女'
  17. }
  18. ],
  19. option:{
  20. page:false,
  21. align:'center',
  22. menuAlign:'center',
  23. menuWidth:400,
  24. viewBtn:true,
  25. column:[
  26. {
  27. label:'姓名',
  28. prop:'name'
  29. }, {
  30. label:'性别',
  31. prop:'sex'
  32. }
  33. ]
  34. },
  35. };
  36. },
  37. methods: {
  38. rowSave(form,done,loading){
  39. this.$message.success('模拟网络请求')
  40. setTimeout(()=>{
  41. this.$message.success('关闭按钮等待');
  42. loading();
  43. },1000)
  44. setTimeout(()=>{
  45. this.$message.success('新增数据'+ JSON.stringify(form));
  46. done();
  47. },2000)
  48. },
  49. refresh(val){
  50. this.$message.success('刷新回调,当前分页对象'+ JSON.stringify(val));
  51. },
  52. rowDel(form,index){
  53. this.$message.success('删除数据'+ JSON.stringify(form));
  54. },
  55. rowUpdate(form,index,done,loading){
  56. this.$message.success('模拟网络请求')
  57. setTimeout(()=>{
  58. this.$message.success('关闭按钮等待');
  59. loading();
  60. },1000)
  61. setTimeout(()=>{
  62. this.$message.success('编辑数据'+ JSON.stringify(form)+'数据序号'+index);
  63. done();
  64. },2000)
  65. },
  66. }
  67. }
  68. </script>