Avue是一款基于Element-Ui再封装的一款ui框架,使用方便。但是自己在工作中经常记不住一些配置,虽然Avue官网上面都有这些配置说明,但是有时候自己还是会找很久才找到,为了方便自己今后查找使用,将一些常用的配置梳理在下面
1、表格配置项 option
<avue-crud :option="option" ref="crud" //表格常用事件 @on-load="getList"//这个事件会在表格所在的组件加载时就会执行后面的getList方法,初始化表格数据。并且当表格翻页或者pageSize变化时候也会自动执行该方法,这时候表格绑定的 :page.sync="page"中的page的值也会随时更新,当页面大小变化时,还会自己将页面变为1 如果使用了这个方法 其实表格的 @current-change @size-change两个事件处理函数就不需要了 翻页事件全在on-load里面处理了 @current-change="事件处理函数"//表格翻页的页码发生变化时,并且事件处理函数里面第一个参数就是翻页的页码 @size-change="pageSizeChange"//表格翻页每页显示条数变化时触发,并且事件处理函数里面第一个参数就是当前的size大小 @search-change="searchChange"//表格搜索 事件处理函数默认有两个参数 form与done 第一个为搜索框的值 第二个为关闭搜索的刷新状态 @row-save="rowSave"//表格新增表单确定按钮的回调,注意:事件处理函数rowSave默认有三个参数分别为:row,done,loading,row是表单的值,done用于关闭表单 @row-update="rowUpdate" //表格行编辑的回调,改事件处理含数默认四个参数 row,index,done,loading @row-del="rowDel"//表格操作行删除按钮回调,事件处理函数接受两个参数,row,index 。row是表单数据,index是当前数据所在表格行的索引 @refresh-change="refreshChange" //表格的刷新按钮的回调,这个函数默认自己不带参数 @current-row-change="handleCurrentRowChange"//表格行被点击时的回调,回调函数的第一个参数是当前被点击行的数据 @tree-load&