AVUE-刷新数据

励志秃头码代码

于 2024-04-09 10:21:54 发布

阅读量376

点赞数 3

分类专栏：前端文章标签： java 前端服务器

本文链接：https://blog.csdn.net/TA016422/article/details/137541247

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文详细描述了一个使用Vue的组件，展示了如何在点击刷新按钮后调用refreshChange方法，以及如何配置CRUD数据和选项。代码示例包括数据结构、选项设置和刷新后的回调功能。

摘要由CSDN通过智能技术生成

1.效果图

2.代码

点击刷新按钮回调refresh-change方法

<template>
  <div id="my-component">
   <avue-crud :data="data" :option="option" @refresh-change="refreshChange"></avue-crud>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      data: [
        {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }
      ],
      option: {
        addBtn:false,
        menu:false,
        column: [
          {
            label: '姓名',
            prop: 'name'
          }, {
            label: '性别',
            prop: 'sex'
          }
        ]
      },
    };
  },

  methods: {
   refreshChange(){
     this.$message.success('刷新回调');
   }
  }
};

</script>

<style lang="scss" scoped>
#my-component {
}
</style>