vue2中使用Avue框架

最新推荐文章于 2024-08-30 10:28:41 发布

多秋浮沉度华年

最新推荐文章于 2024-08-30 10:28:41 发布

阅读量2k

点赞数 1

分类专栏： vue Avue 文章标签：前端 vue.js elementui

本文链接：https://blog.csdn.net/webshao/article/details/125094286

版权

vue 同时被 2 个专栏收录

16 篇文章

订阅专栏

Avue

1 篇文章

订阅专栏

本文介绍了如何在Avue官网上实现数据表格的动态展示、搜索过滤、分页及CRUD操作，包括表单配置、事件处理和自定义插槽。详细讲解了选项配置参数和组件间的交互方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Avue官网
在这里插入图片描述

大致代码如下:

1.option 是定义的数据
2:data 后端返回的数据
3:page 分页
4:form 绑定的表单元素
5.value/v-model 绑定值
5.相关的一些绑定事件
@search-change=“searchChange”
@search-reset=“searchReset”
@selection-change=“selectionChange”
@current-change=“currentChange”
@size-change=“sizeChange”
@refresh-change=“onLoad(page, query)”
@on-load=“onLoad”
@row-save=“handleRowAdd” 表单保存调用Function(row,done,loading)
@row-update=“handleRowUpdate” //表单更新调用,修改时使用
ref=“crud”

相关事件
@rowAdd 打开表单新增窗口
@rowView 打开表单查看窗口Function(row,index)
@rowEdit 打开表单编辑窗口Function(row,index)
@getPropRef 获取prop的ref对象Function(prop)
在这里插入图片描述

插槽：

   <template slot="menu" slot-scope="{ row, index }">
          <el-button type="text" @click="$refs.crud.rowView(row, index)"
            >查看</el-button
          >
          <el-button type="text" @click="$refs.crud.rowEdit(row, index)"
            >修改</el-button
          >
          <el-button
            type="text"
            class="menu-del-btn"
            @click="handleRowDelete(row, index)"
            >删除</el-button
          >
  </template>

slot:中可使用的插槽名称：

menu //菜单的操作按钮自定义内容,参数为{row,label,dic,index}
menuForm //表单操作按钮的自定义内容,参数为{row,label,dic,$index}
header // 表格区域头部自定义卡槽
footer //表格区域尾部自定义卡槽
page //表格分页区域自定义卡槽
menuLeft // 表格头部左侧内容卡槽
menuRight // 表格头部右侧内容
menuBtn // 操作栏目下拉菜单自定义(要用el-dropdown-item组件包裹起来),参数为{row,label,dic，index}
search //表格搜索区域自定义卡槽
searchMenu 表格搜索区域搜索按钮自定义卡槽
下面说下option定义的一些参数含义

在这里插入代码片 {

 1. label: '字典类型',   表格列名称
 2. prop: 'dictType',  列字段(唯一不重复)
 3. search: true,  // 是否开启表单搜索
 4. hide: false,	//是否隐藏此列表
 5. overHidden: true,   //文字超出隐藏
 6. addDisplay:true  //表单新增时是否可见
 7.  addDisabled:true  // 表单新增时是否禁止
 8. addDetail:true //表单新增时是否为查看模式
 9.  editDisabled: false // 表单编辑时是否禁止
 10. editDisplay:true // 表单编辑时是否可见
 11. editDetail:false // 表单编辑时是否为查看模式
 12.  type: "daterange" // 展示类型
 13. searchRange:true, // 搜索范围 ,type为date时显示不全可加上
 14. row: false,  //是否单独成一行
 15.  formatter： // 内容格式化  row,value,label,column  可对数据进行操作并返回到列表展示
 16. html:false,//开启html转义 可以将标签转译就跟v-html一样
 17.  rules: [{  //验证规则 required: true, message: "请输入字典类型",trigger: "blur"}] //校验规则 https://github.com/yiminghe/async-validator

    

  
 
    
  

    
   
    
   
    
    
   
    
     
    
     
   
  },