• 方法
    • 普通用法

    方法

    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>