avue总结

最新推荐文章于 2024-03-12 08:38:48 发布

iu№

最新推荐文章于 2024-03-12 08:38:48 发布

阅读量1.4k

点赞数 2

文章标签： html javascript

本文链接：https://blog.csdn.net/qq3163566/article/details/120722720

版权

该博客主要总结了avue框架中基础的表格属性，包括相关设置和使用方法，为理解和应用avue提供关键信息。

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

一、基本属性与方法

基础的表格属性

    <avue-crud     
      :option="option"//设置表格属性
        :table-loading="loading"  //表格等待框的控制，加载的时候转圈圈，设置true/false
        :search.sync="search"  //搜索的变量(需要sync修饰符)
        :visible.sync="changeInfo" //是否显示，设置true/false
        :data="data"  //表格显示的数据   与后台获取对应
        :page.sync="page"    //表格分页配置选项(需要sync修饰符)
        :permission="permissionList"  //权限控制    操作按钮动态显示
        :before-open="beforeOpen"    //打开前的回调function(file,column)
        v-model="form"               //数据模型 用来存取页面值的 
        ref="crud"  //在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；
        @cell-click="pageto"         //表格点击运行方法 onclick方法定义
        @row-update="rowUpdate"        //数据编辑后触发
        @row-save="rowSave"          //新增数据后点击确定触发该事件
        @row-del="rowDel"            //行数据删除时触发该事件
        @row-click="handleRowClick"   //单击行运行的方法
        @search-change="searchChange"    //点击搜索后触发该事件
        @search-reset="searchReset"      //清空搜索回调方法
        @selection-change="selectionChange"    //当选择项发生变化时触发该事件
        @current-change="currentChange" 
        //点击页码会调用current-change方法回调当前页数，返回当前第几页
        @size-change="sizeChange"      //点击每页多少条会调size-change方法回调
        @refresh-change="refreshChange" //点击刷新按钮触发该事件
        @on-load="onLoad">         //打开表格页面的方法，一般用来初始化，返回页面数据
 
    </avue-crud>

<script>
export default {
  data() {
    return {
      form: {},
      type: "",
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
          height:'auto',    //表格高度
 
          emptyText: "暂无数据哦~",//数据为空的提示
 
          calcHeight: 30,    //表格高度差（主要用于减去其他部分让表格高度自适应）
 
          tip: false,        //弹框文字提示