Avue-crud使用各参数说明

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="treeLoad"//表格行展开的懒加载回调，回调函数自带三个参数 row, treeNode,resolve  row：当前展开行的数据    treeNode：展开行节点数据    resolve：行懒加载的成功回调，在resolve里面将懒加载的数据传出去表格进行渲染 回调函数大致写法如下：// 表格展开懒加载回调treeLoad(row, treeNode,resolve) {this.tjjcode = row.code//重新调用getStatData方法获取数据，在resolve里面将新数据传递出去供表格渲染子节点getStatData(this.deptId.id,this.tjjcode).then(res=> {let list = res.data.data;resolve(list);});},

//表格option配置
option:{
title:‘表格的标题’,
:table-loading = “tableLoading”//表格的状态（刷新、非刷新）
align:‘center’, // 表格列齐方式
menuAlign:‘center’, // 菜单栏对齐方式
excelBtn: true,//表单导出按钮

         columnBtn:false, //列动态显隐按钮refreshBtn:false, // 刷新按钮saveBtn:false, // 新增表单的保存按钮;updateBtn:false, // 更新按钮emptyBtn:false//搜索清空按钮addBtn:false, // 表格新增按钮expand: true//设置表格行可展开    注意：一般懒加载开启就不设置expand为true  expand：true会在表格第一列前面自己加一列放展开箭头类似于序号列那样  不加的话不会多产生一列 就在数据第一列有一个下拉箭头 样式稍微美观一点 所以一般不加 expand：true的设置lazy:true,//开启行展开懒加载rowKey:'code',// 表格行可展开的key 表格行展开必须设置rowKeyaccordion:true,//同级节点只展开一个 另外的收起menu: false,//表格操作列关闭、开启（查看 编辑...）menuFixed:'left',//表格操作列是否冻结（true/false/left-操作列在表格左边/right-操作列在表格右边）cancelBtn:false, // 行内查看取消按钮  viewBtn: true,//行内查看按钮delBtn:false, // 行内删除按钮editBtn:false, // 行内编辑按钮index:true,//开启索引（序号）indexLabel:'序号',//并将索引字段设置为“序号”indexFixed:false,//设置序号列是否冻结selection:true,//开启勾选功能  tip: false,//行可选情况下的选中提示reserveSelection:true,//可选情况下保留之前的勾选（来回翻页勾选不丢失）menuWidth: 150,//表格操作列宽度searchMenuSpan:4,//搜索菜单栏的栅格宽度（整个搜索栏包括input框 按钮整个菜单栏的宽度）column:[]//表格的表头配置 详见： 2、表头column配置}//表格一些自定义按钮操作
1、导出自定义按钮this.$refs.crud.rowExcel();   //通过refs拿到原生rowExcel方法 调用可弹出下载的弹框点击弹框的下载按钮即可实现导出
2、表头column配置// 表头配置column: [{label: '题库期数',//列显示的名称prop: 'pernumber',//列依赖的数据字段search: true,//开启当前行数据可搜索searchValue: "搜索默认值",//搜索的默认值addDisplay:false,//当前行数据在新增表单中是否可见addDisabled:false,//当前行数据在新增表单中是否可编辑editDisplay:false,//当前行数据在编辑表单中是否可见editDisabled:true//当前行数据在编辑表单中是否可编辑overHidden: true,//超出省略号显示sortable: true,//开启表格排序hide: true,//隐藏列（在表格展示中隐藏 但是会在新增表单中显示 这一条可以解决表格不展示新增需要添加数据的，情况，解决掉往新增表单插入插槽的情况）type:"password / textarea/checkbox/select"   //type为password可隐藏密码/type为textarea为文本编辑在新增、修改表单是可拉伸的文本编辑框不是简单的input框 checkbox:新增表单是复选框   select：搜索、新增表单会是下拉框，下拉选项结合下面的dic配置项实现filterable:true,  //在表单为select状态时 可键盘输入进行筛选选择项allowCreate:true, //结合上面的filterable配置可以使select选框为可输入状态 可以键入没有的选择项 并新键入的选择项可拱选择defaultFirstOption:true//在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用dicData:[{label:"密码授权",value:"password"}],//数据字典 type设置为checkbox或者select的时候结合dic配置来展示选框的值 这是静态的写法 匹配上value后当前选框的lable就是密码授权。同时在表格展示上，也会自动匹配数据字典的label进行展示，无需再使用插槽通过v-if判断该项的值再展示对应的内容  数据字典是一种常用的思想 // dicUrl: '/admin/dict/type/grant_types',//type设置为checkbox的时候除了上面静态的写法外，也可以获取服务端的动态数据字典multiple：true  //当type为select时，设置是否多选disabled：true  //禁用编辑rules: [//设置但当前列表单验证{required: true,message: "请输入姓名",trigger: "blur"},{min: 2,max:6,message: "请输入2-6个字符之间"},]},{label: '状态',prop: 'status',formslot: true,//自定义表单开关项type:select,//表单呈现效果为下拉框}
]

3、使用插槽向表单（新增表单、修改表单、搜索表单）中插入内容

1、avue自带新增表单、修改表单、搜索变淡，已经为我们封装好了
2、会将column中配置了的字段在表单中展示出来
2、在使用的时候我们经常需对表单做一些自定义的东西
3、下面记录一下在工作中用到的一些方法 方便日后使用的时候直接查找一、设置表单中某一字段输入框为一个下拉框1、可以自己设置某一字段是下拉框、还是input框 还是其他形式
2、下面以column中的 状态（status）字段为例
3、自定义表单形式 需要使用到插槽 所以 必须要先在column中设置该字段的 fromslot:true 详见:表头column配置
4、除了使用插槽方式外 还有更加简便的方法 直接在column中配置 type:select 表单就是下拉框了<avue-crud>//内部使用插槽 插入下拉框<template slot="statusForm">  //注意：slot名字必须要是prop的属性值+Form  即：statusForm<avue-select/></template><avue-crud>二、向表单中插入一个额外的输入框
1、此时的插槽名字为：menuForm
<template slot="menuForm"><el-form-item label="维修状态"><el-input placeholder="维修状态" v-model="search.value"/></el-form-item>
</template>三、向表单中插入一个自定义的按钮 例如文件上传
1、此时插槽的名字依然为:menuForm
<template slot="menuForm"><el-upload style="display: inline-block; margin-left: 10px" ref="upload" :limit="1"action="/api/blade_basic/company/import-company":data="{ isCovered: 1 }":on-success="uploadSuccess":on-progress="uploadprogress"><el-button type="success" size="small" icon="el-icon-plus">导入数据</el-button></el-upload>
</template>四、向搜索表单插入内容
1、向搜索表单插入一个额外的（column中没有的字段）输入框
2、此时的插槽名字为：search
<template slot="search"><el-form-item label="维修状态"><el-input placeholder="维修状态" v-model="search.value"/></el-form-item>
</template>

Avue-crud使用各参数说明相关推荐

Avue Crud组件属性说明
Avue Crud组件属性说明表格配置 option:{title:'表格的标题',align:'center', // 表格列齐方式(left,right,center)menuAlign:'ce ...
AVUE crud upload组件示例
在项目中使用avue crud组件,其中用到了upload组件. 官网中关于upload的解释非常简单,需要仔细阅读参数配置含义. 给出示例: 表banner(轮播横幅图表)使用avue进行CRUD操 ...
avue去除table表格操作列
过程 1.在对应的option中将设置:menu: false 2.此时操作列没有了,但是可能会变成一个空列,那可能是你option里的column中的lable设置了width,此时把这些width ...
avue实现简单crud
avue的使用最近做的项目中接触到了一个新的框架感觉很好用所以推荐给大家~~ [简介] Avue.js是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主 ...
avue中crud翻页器currentPage等修改数据，页面不同步问题
<avue-crud :option="option" ref="crud" //表格常用事件 @on-load="getList"/ ...
avue table crud
<avue-crud:data="data" //数据:option="option" //配置@size-change="sizeChange ...
Mybatis-Plus入门之通用CRUD+基本配置介绍
1.了解Mybatis-Plus 1.1.Mybatis-Plus介绍 MyBatis-Plus(简称 MP)是一个 MyBatis 的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化开 ...
element ui 二级菜单_基于avue和element-ui集成解决方案avue-cli
avue-cli是一款基于avue和element-ui完全开源.免费的企业后端产品前端集成解决方案,采用最新的前端技术栈,已经准备好了大部分的项目准备工作,你可以快速进行二次开发功能全局错误日志 ...
PHP5: mysqli 插入, 查询, 更新和删除 Insert Update Delete Using mysqli (CRUD)
原文: PHP5: mysqli 插入, 查询, 更新和删除 Insert Update Delete Using mysqli (CRUD) PHP 5 及以上版本建议使用以下方式连接 MySQL ...
第 2 章 MybatisPlus 通用 CRUD
第 2 章 MybatisPlus 通用 CRUD 1.概述回想一下,如果我们有一张 User 表,并且已经创建好了对应的实体类,实现 User 表的 CRUD 操作我们需要做什么呢? Mybati ...

Avue-crud使用各参数说明

Avue-crud使用各参数说明相关推荐

最新文章

热门文章