avue或者vue子组件数据变化后刷新父组件

最新推荐文章于 2026-08-01 10:29:38 发布
原创 最新推荐文章于 2026-08-01 10:29:38 发布 · 6.1k 阅读 · 11 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文详细介绍了如何在使用Avue表单设计器时，通过子组件操作触发父组件数据的刷新，包括两种方法：直接在父组件中定义刷新方法和通过子组件的自定义事件更新父组件。涉及到了Vue组件间的通信和数据同步技巧。

关注Avue表单设计器的使用： 【Avue表单设计器的使用技巧】

关注Avue企业级开发应用官方源代码: 官方源代码

 

描述:  使用avue.js或者vue.js做后台管理系统时，常常涉及到子组件(子弹窗) 修改，添加操作后，需要刷新父组件重新加载数据:

           父组件代码:  重点关注该方法:

           父组件中定义该方法：

 handleRefreshChange() {
      this.getList(this.page);  // 父组件获取后台的数据
 }
<template>
  <div class="user">
    <basic-container>
      <avue-crud
        :option="option"
        ref="crud"
        v-model="form"
        :page="page"
        @on-load="getList"
        @size-change="sizeChange"
        @current-change="currentChange"
        :table-loading="listLoading"
        @search-change="handleFilter"
        @refresh-change="handleRefreshChange"
        @row-update="update"
        @row-save="create"
        :before-open="handleOpenBefore"
        :data="list"
      >
        <template slot="username" slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
        <template slot="amount" slot-scope="scope">
          <div v-if="scope.row.currType === 'VIR'">
            {{ scope.row.amount }}
          </div>
          <div v-if="scope.row.currType !== 'VIR'">
            {{ scope.row.amount / 100 }}
          </div>
        </template>

        <template slot="role" slot-scope="scope">
          <span v-for="(role, index) in scope.row.roleList" :key="index">
            <el-tag>{{ role.roleName }} </el-tag>&nbsp;&nbsp;
          </span>
        </template>
        <template slot="deptId" slot-scope="scope">
          {{ scope.row.deptName }}
        </template>
        <template slot="lockFlag" slot-scope="scope">
          <el-tag>{{ scope.label }}</el-tag>
        </template>
        <template slot="menu" slot-scope="scope">
          <el-button v-show = "scope.row.status == 100 || scope.row.status == 110"
            type="text"
            icon="el-icon-edit"
            @click="handleView(scope.row, scope.index)">冲账
          </el-button>
          <el-button  v-show = "scope.row.status === -100"
            type="text"
            icon="el-icon-edit"
            @click="handlePushItem(scope.row, scope.index)">重新记账
          </el-button>
        </template>
      </avue-crud>
    </basic-container>
    <info-view v-if="infoVisible" ref="infoView"></info-view>
  </div>
</template>

<script>
import { fetchList, putObj, putObjStatus } from "@/api/acct/acctTradeRecord";
import { deptRoleList } from "@/api/admin/role";
import { fetchTree } from "@/api/admin/dept";
import { tableOption } from "@/const/crud/acct/acctTradeRecord";
import InfoView from "./record-form";
import { mapGetters } from "vuex";

export default {
  name: "table_user",
  components: {
    InfoView,
  },
// data()函数返回对象 : {}
  data() {
    return {
      option: tableOption,
      treeDeptData: [],
      checkedKeys: [],
      roleProps: {  // 配置项传递数据
        label: "roleName",
        value: "roleId",
      },
      defaultProps: {
        label: "name",
        value: "id",
      },
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条,
        isAsc: false, //是否倒序
      },
      searchParam: {},
      list: [],
      listLoading: true,
      role: [],
      form: {},  // 配置项key,value为一个空对象,相当于先声明一个变量,并初始化一个空对象
      rolesOptions: [],
      infoVisible: false,
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  watch: {
    role() { // 没执行该方法时，都创建一个新实例对象{this.form.role = this.role},避免共享变量安全问题
      this.form.role = this.role;
    },
  },
  created() {
    this.business_user_add = this.permissions["business_user_add"];
    this.business_user_edit = this.permissions["business_user_edit"];
    this.business_user_del = this.permissions["business_user_del"];
  },
  methods: {
    getList(page, params) {
      if (params == undefined) {
        params = this.searchParam;
      }
      this.listLoading = true;
      fetchList(
        Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize,
          },
          params
        )
      ).then((response) => {
        this.list = response.data.data.records;
        this.page.total = response.data.data.total;
        this.listLoading = false;
      });
    },
    getNodeData(data) {
      deptRoleList(this.$store.state.user.userInfo.tenantId).then(
        (response) => {
          this.rolesOptions = response.data.data;
        }
      );
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    },
    handleFilter(param, done) {
      this.page.currentPage = 1;
      this.getList(this.page, param);
      this.searchParam = param;
      done();
    },
    // 父组件定义刷新的页面方法
    handleRefreshChange() {
      this.getList(this.page);
    },
    handleOpenBefore(show, type) {
      window.boxType = type;
      // 查询部门树
      fetchTree().then((response) => {
        this.treeDeptData = response.data.data;
      });
      // 查询角色列表
      deptRoleList(this.$store.state.user.userInfo.tenantId).then(
        (response) => {
          this.rolesOptions = response.data.data;
        }
      );
      // 若是编辑、查看回显角色名称
      if (["edit", "views"].includes(type)) {
        this.role = [];
        for (let i = 0; i < this.form.roleList.length; i++) {
          this.role[i] = this.form.roleList[i].roleId;
        }
      } else if (type === "add") {
        // 若是添加角色列表设置为空
        this.role = [];
      }
      show();
    },

    create(row, done, loading) {
      addObj(this.form)
        .then(() => {
          this.getList(this.page);
          done();
          this.$notify.success("创建成功");
        })
        .catch(() => {
          loading();
        });
    },
    update(row, index, done, loading) {
      putObj(this.form)
        .then(() => {
          this.getList(this.page);
          done();
          this.$notify.success("修改成功");
        })
        .catch(() => {
          loading();
        });
    },
    handleView(row, index) {
      this.infoVisible = true;
      this.$nextTick(() => {
        this.$refs.infoView.init(row.id); // 给InfoView组件中的init方法赋值
      });
    },
    handlePushItem(row, index) {
       this.$confirm("此操作将重新记账操作, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消", type: "warning"
                 }
                ).then(()=> {
                      putObjStatus(row).then(response=>{      
                      let resultCode = response.data.code;
                      console.info("resultData: "+JSON.stringify(resultCode));
                      this.getList(this.page);
                      if(resultCode ===0){
                          this.$message.success('操作成功')
                      }else{
                          this.$message.error("操作失败");
                      }
                      
                   }).catch((e)=>{
                       this.getList(this.page); // 当前页面刷新
                      this.$message.error(e)
                   });
                }).catch(()=>{});

    },
  },
};
</script>

子组件代码: (子弹窗)

 关注子组件(子页面)调用父页面的方法，刷新父页面;

this.$parent.handleRefreshChange(); // 刷新父页面

<style type="text/css">
       .customWidth{
        width:30%;
    }
</style>
<template>
  <!-- 添加或修改菜单对话框 -->
  <el-dialog 
             :visible.sync="visible"  customClass="customWidth">
    <el-form ref="dataForm" :model="form"  label-width="80px">
      
      <el-form-item label="编号" prop="cusNo">
        <el-input v-model="form.cusNo" placeholder="编号不能为空" disabled/>
      </el-form-item>
      <el-form-item label="冲账原因" prop="reason">
        <el-input v-model="form.reason" type="textarea" rows="10" placeholder="请输入冲账原因"/>
      </el-form-item>
      

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @statusChange="listenSignStatus" @click="dataFormSubmit">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {putObj} from '@/api/acct/acctTradeRecord'
  import TableForm from './'
  import "@riophae/vue-treeselect/dist/vue-treeselect.css"
  export default {
    name: "record-info",
    components: {TableForm},
    data() {
      return {
        // 遮罩层
        loading: true,
        // 是否显示弹出层
        visible: false,
        form: {
          cusNo: undefined,
          reason: undefined,
        }
      };
    },
    methods: {
      init(id) {
        if (id != null) {
          this.form.cusNo = id;
        }
        this.visible = true
      },
    dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            putObj(this.form).then((response) => {
              let resultCode = response.data.code;
              console.info("resultData: " + JSON.stringify(resultCode));
              this.$message.success('恭喜您,冲账成功');
              this.visible = false;   // 关闭子组件
              this.$parent.handleRefreshChange(); // 刷新父页面
            }).catch((e)=>{
              this.$parent.handleRefreshChange(); // 调用父组件的方法,直接进行刷新
              this.$message.error(e);
            });
          }
        })
      },
    
    }
  };
</script>

方法二： 

  1. //在父组件中设置

  2. <template>
  <div class="user">
    <basic-container>
      <avue-crud
        :option="option"
        ref="crud"
        v-model="form"
        :page="page"
        @on-load="getList"
        @size-change="sizeChange"
        @current-change="currentChange"
        :table-loading="listLoading"
        @search-change="handleFilter"
        @refresh-change="handleRefreshChange"
        @row-update="update"
        @row-save="create"
        :before-open="handleOpenBefore"
        :data="list"
 
      >
        <template slot="username" slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
        <template slot="amount" slot-scope="scope">
          <div v-if="scope.row.currType === 'VIR'">
            {{ scope.row.amount }}
          </div>
          <div v-if="scope.row.currType !== 'VIR'">
            {{ scope.row.amount / 100 }}
          </div>
        </template>

        <template slot="role" slot-scope="scope">
          <span v-for="(role, index) in scope.row.roleList" :key="index">
            <el-tag>{{ role.roleName }} </el-tag>&nbsp;&nbsp;
          </span>
        </template>
        <template slot="deptId" slot-scope="scope">
          {{ scope.row.deptName }}
        </template>
        <template slot="lockFlag" slot-scope="scope">
          <el-tag>{{ scope.label }}</el-tag>
        </template>
        <template slot="menu" slot-scope="scope">
          <el-button v-show = "scope.row.status == 100 || scope.row.status == 110"
            type="text"
            icon="el-icon-edit"
            @click="handleView(scope.row, scope.index)">冲账
          </el-button>
          <el-button  v-show = "scope.row.status === -100"
            type="text"
            icon="el-icon-edit"
            @click="handlePushItem(scope.row, scope.index)">重新记账
          </el-button>
        </template>
      </avue-crud>
    </basic-container>
    <info-view v-if="infoVisible"  @refresh-TableData="refreshChangeDataList" 
 ref="infoView"></info-view>  《只能配置在子组件中，才能生效,配置在父组件中不生效，亲测》
  </div>
</template>

<script>
import { fetchList, putObj, putObjStatus } from "@/api/acct/acctTradeRecord";
import { deptRoleList } from "@/api/admin/role";
import { fetchTree } from "@/api/admin/dept";
import { tableOption } from "@/const/crud/acct/acctTradeRecord";
import InfoView from "./record-form";
import { mapGetters } from "vuex";

export default {
  name: "table_user",
  components: {
    InfoView,
  },
  data() {
    return {
      option: tableOption,
      treeDeptData: [],
      checkedKeys: [],
      roleProps: {
        label: "roleName",
        value: "roleId",
      },
      defaultProps: {
        label: "name",
        value: "id",
      },
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条,
        isAsc: false, //是否倒序
      },
      searchParam: {},
      list: [],
      listLoading: true,
      role: [],
      form: {},
      rolesOptions: [],
      infoVisible: false,
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  watch: {
    role() {
      this.form.role = this.role;
    },
  },
  created() {
    this.business_user_add = this.permissions["business_user_add"];
    this.business_user_edit = this.permissions["business_user_edit"];
    this.business_user_del = this.permissions["business_user_del"];
  },
  methods: {
    getList(page, params) {
      if (params == undefined) {
        params = this.searchParam;
      }
      this.listLoading = true;
      fetchList(
        Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize,
          },
          params
        )
      ).then((response) => {
        this.list = response.data.data.records;
        this.page.total = response.data.data.total;
        this.listLoading = false;
      });
    },
    getNodeData(data) {
      deptRoleList(this.$store.state.user.userInfo.tenantId).then(
        (response) => {
          this.rolesOptions = response.data.data;
        }
      );
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    },
    handleFilter(param, done) {
      this.page.currentPage = 1;
      this.getList(this.page, param);
      this.searchParam = param;
      done();
    },
    // 刷新父页面的方法，并获取来自子页面的数据
    refreshChangeDataList(valData){
      console.info("子组件传递的参数:"+valData);
      this.getList(this.page);
    },
    handleRefreshChange() {
      this.getList(this.page);
    },
    handleOpenBefore(show, type) {
      window.boxType = type;
      // 查询部门树
      fetchTree().then((response) => {
        this.treeDeptData = response.data.data;
      });
      // 查询角色列表
      deptRoleList(this.$store.state.user.userInfo.tenantId).then(
        (response) => {
          this.rolesOptions = response.data.data;
        }
      );
      // 若是编辑、查看回显角色名称
      if (["edit", "views"].includes(type)) {
        this.role = [];
        for (let i = 0; i < this.form.roleList.length; i++) {
          this.role[i] = this.form.roleList[i].roleId;
        }
      } else if (type === "add") {
        // 若是添加角色列表设置为空
        this.role = [];
      }
      show();
    },

    create(row, done, loading) {
      addObj(this.form)
        .then(() => {
          this.getList(this.page);
          done();
          this.$notify.success("创建成功");
        })
        .catch(() => {
          loading();
        });
    },
    update(row, index, done, loading) {
      putObj(this.form)
        .then(() => {
          this.getList(this.page);
          done();
          this.$notify.success("修改成功");
        })
        .catch(() => {
          loading();
        });
    },
    handleView(row, index) {
      this.infoVisible = true;
      this.$nextTick(() => {
        this.$refs.infoView.init(row.id); // 给InfoView组件中的init方法赋值
      });
    },
    handlePushItem(row, index) {
       this.$confirm("此操作将重新记账操作, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消", type: "warning"
                 }
                ).then(()=> {
                      putObjStatus(row).then(response=>{      
                      let resultCode = response.data.code;
                      console.info("resultData: "+JSON.stringify(resultCode));
                      this.getList(this.page);
                      if(resultCode ===0){
                          this.$message.success('操作成功')
                      }else{
                          this.$message.error("操作失败");
                      }
                      
                   }).catch((e)=>{
                       this.getList(this.page); // 当前页面刷新
                      this.$message.error(e)
                   });
                }).catch(()=>{});

    },
  },
};
</script>

    子组件代码如下：

  3. <style type="text/css">
       .customWidth{
        width:30%;
    }
</style>
<template>
  <!-- 添加或修改菜单对话框 -->
  <el-dialog 
             :visible.sync="visible"  :ticustomClass="customWidth">
    <el-form ref="dataForm" :model="form"  label-width="80px">
      
      <el-form-item label="编号" prop="cusNo">
        <el-input v-model="form.cusNo" placeholder="编号不能为空" disabled/>
      </el-form-item>
      <el-form-item label="冲账原因" prop="reason">
        <el-input v-model="form.reason" type="textarea" rows="10" placeholder="请输入冲账原因"/>
      </el-form-item>
      

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary"  @click="dataFormSubmit">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {putObj} from '@/api/acct/acctTradeRecord'
  import TableForm from './'
  import "@riophae/vue-treeselect/dist/vue-treeselect.css"
  export default {
    name: "record-info",
    components: {TableForm},
    data() {
      return {
        // 遮罩层
        loading: true,
        // 是否显示弹出层
        visible: false,
        form: {
          cusNo: undefined,
          reason: undefined,
        }
      };
    },
    methods: {
      init(id) {
        if (id != null) {
          this.form.cusNo = id;
        }
        this.visible = true
      },
// 提交完成后刷新父页面
    dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            putObj(this.form).then((response) => {
              let resultCode = response.data.code;
              console.info("resultData: " + JSON.stringify(resultCode));
              this.$message.success('恭喜您,冲账成功');
              this.visible = false; 
              this.$emit('refresh-TableData',true); // 刷新父页面this.$emit('eventName',param)
              //this.$parent.handleRefreshChange();
            }).catch((e)=>{
              this.$emit('refresh-TableData',true);
              //this.$parent.handleRefreshChange(); // 调用父组件的方法,直接进行刷新
              this.$message.error(e);
            });
          }
        })
      },
    
    }
  };
</script>

  4. 子页面刷新父组件：  this.$emit('refresh-TableData',true); // 刷新父页面this.$emit('eventName',param)，事件名为refresh-TableData 与父组件<avue-crud> 中的配置：

  5.    @refresh-TableData="refreshChangeDataList"  《父组件中配置refreshChangeDataList 方法名,并在配置项methods中申明该方法，如下》！ 保持一致 【@refresh-TableData】

蜗牛杨哥
关注
avue表单常规使用说明——vue
weixin_44770377的博客
09-11 2万+
avue是基于element二次封装的框架 <template><!-- vue的模板元素标签 --> <div class="execution"> <basic-container> <avue-crud <!-- avue的表格标签 --> ...
使用Avue的方法
周红伟讲AI
03-22 1万+
1. yarn add element 2. 安装Aue 在Plugins中建立Avue.js npm i @smallwei/avue -S import Avue from '@smallwei/avue'; import '@smallwei/avue/lib/index.css'; Vue.use(Avue); 2. Vue.js - 在项目中使用Sass、SCSS的方法...
子组件更新后刷新父组件列表数据
shummm的博客
10-17 559
子组件更新父组件数据
一劳永逸之Avue-Crud组件
FrontEndEngineer的博客
06-01 1881
错误场景：根据筛选条件不同，查询到的表格要求展示不同（表格标题列发生改变），此时表格在切换条件查询时会出现展示问题。今天发现了一款表格组件特别好用，传入表头，传入数据即可完成表格的渲染；1. 前端ui框架各种各样，每种框架都有自己的表格组件。表格中数据对象的key需要与表头的prop相对应。5. avue-crud 使用过程中遇到的问题。6. 更多详情参见Avue官方文档。3. Crud组件的简单使用。2. Avue的安装与引用。4. 表头与表格数据格式。
avue表格通过change控制元素在不同value下其它对象的属性
weixin_48348089的博客
08-22 1853
avue表格通过change控制元素在不同value下其它对象的属性
vue子组件无法根据prop属性值变化实现视图更新问题记录
My_Soul_的博客
03-17 1818
vue中computed属性值变化未触发视图更新问题记录
vue 解决父组件每次进入子组件刷新子组件数据
一枚苦逼打工人分享的日常
07-10 3277
解决父组件打开子组件数据不刷新。
avue属性及使用详细介绍
Devil678的博客
11-15 3675
<template> <!-- 基础组件 --> <basic-container> <!-- <el-button @click='exportHandle'>导出</el-button> --> <avue-crud 设置表格属性 :option="option" 用来存取页面的值 v-model="form" 获取后台数据 :
Vue使用avue-crud表格组件的用法及参数说明（超详细）
热门推荐
随便写写...
05-25 2万+
avue-crud表格组件的详细说明，补录中
Avue动态字典加载：基于rowCell实现参数化字典数据刷新
最新发布
weixin_42676824的博客
08-01 293
在前端开发中，字典数据管理是处理枚举值和数据映射的基础技术，其核心原理是通过键值对映射实现数据标准化展示。在Vue.js生态中，Avue框架的avue-crud组件提供了强大的字典功能，支持通过dicUrl配置远程数据源。然而，当字典数据需要根据动态参数（如用户权限、组织架构）变化时，静态配置无法满足需求。本文聚焦于**avue-crud动态字典加载**这一技术痛点，深入解析如何利用**rowCell方法**实现字典数据的参数化刷新。通过将dicUrl设计为响应式计算属性，结合rowCell触发机制，可在不
AVue赋值{{}}
隔壁老瓦的专栏
05-27 2817
<template><!-- vue的模板元素标签 --> <div class="execution"> <basic-container> <avue-crud <!-- avue的表格标签 --> ref="crud" <!-- 在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件.
Avue表单数据监听优化：从全量刷新到精准响应的性能革命
gitblog_01412的博客
08-05 355
你是否还在为表单数据监听烦恼？每次字段变化都触发全量校验导致页面卡顿？本文将揭秘Avue.js最新数据监听方案，教你如何实现**单项数据精准监控**，将表单响应速度提升300%，彻底解决大型表单性能瓶颈！ 读完本文你将掌握： - ✅ 表单数据监听的底层实现原理 - ✅ 3种精准监控单项变化的实现方案 - ✅ 性能对比测试与优化最佳实践 - ✅ 复杂场景下的高级应用技巧 ## 一、传统表单监听方...
Avue-crud 常用方法、属性
my__flower的博客
03-09 1万+
Avue的v2版本是一个基于element-ui低代码前端框架，Avue的v3是一个基于element-plus低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。avue对于后台管理系统的开发极其便捷，就是配置不容易记住，熟练该框架配置来开发会好点，不然真不如直接用element来开发的好，以下以v2为例。-- 左边插槽 -->新增
深入解析Avue核心属性与实战应用指南
dd012的博客
02-28 1081
本文深入解析了Avue框架的核心属性与实战应用，重点剖析了其作为Vue后台开发利器的option全局配置与column列定义。通过详解calcHeight自适应、数据字典配置、表单联动及权限控制等高频场景，帮助开发者高效构建功能完善的后台管理系统，大幅提升开发效率。
avue crud upload组件 增加自定义参数
sword_happy的博客
11-26 5493
在某项目中使用avue crud upload 控件实现文件上传。想要携带参数，依据文档可配置data参数，应该于upload-before事件中进行data赋值，以达到修改参数的目的。 上源码：crud upload column export const tableUploadOption = { border: true, index: false, indexLabel: '序号', stripe: true, menuAlign: 'center', align: '
Avue实现动态查询与数据展示（附Demo）
码农研究僧的博客
08-19 1568
以下为充电桩的实时动态数据，通过PLC实时传输到数据库中，对应这个页面动态查询数据即可。主要展示前面的界面显示而已
Avue框架学习
AF7593的博客
06-27 1052
在我看来这个框架最大的特点是可以基于JSON配置页面上的From,Table以及各种各样的输入框等,不需要懂前端就可以很快上手,前提是需要多查一下文档。由于我本地的环境全是用docker来搭建的,所以我依然选择用docker搭建我的开发环境。执行到这一步已经可以进行开发任务了,访问 http://localhost:8081/我们的项目使用的框架是 Avue。就可以查看容器的日志啦。
Avue-crud常用配置项
m0_54849806的博客
03-08 2904
Avue是一款基于Element-Ui再封装的一款ui框架，使用方便。但是自己在工作中经常记不住一些配置，虽然Avue官网上面都有这些配置说明，但是有时候自己还是会找很久才找到，为了方便自己今后查找使用，将一些常用的配置梳理在下面 1、表格配置项 option <avue-crud :option="option" ref="crud" //表格常用事件 @on-load="getList"//这个事件会在表格所在的组件加载时就会执行后面的getList方法，初始化表格数据。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值