位置: IT常识 - 正文

Avue-crud 常用方法、属性(avoid什么用法)

编辑:rootadmin
Avue-crud 常用方法、属性 前言

推荐整理分享Avue-crud 常用方法、属性(avoid什么用法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:avec用法,avoidance用法,avoid什么用法,acuvue define,avaricious用法,acuvue define,avoidance用法,avoided用法,内容如对您有帮助,希望把文章链接给更多的朋友!

Avue的v2版本是一个基于element-ui低代码前端框架,Avue的v3是一个基于element-plus低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率。avue对于后台管理系统的开发极其便捷,就是配置不容易记住,熟练该框架配置来开发会好点,不然真不如直接用element来开发的好,以下以v2为例。

安装npm、yarn安装npm i @smallwei/avue -Syarn add @smallwei/avue -S或CDN在线安装<!-- 引入样式文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/index.css"/><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/><!-- 引入相关JS 文件 --><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/avue.min.js"></script>

引入

通过CDN安装的,会挂载在全局属性AVUE下,通过 Vue.use(AVUE) 注册。

import Avue from '@smallwei/avue';import '@smallwei/avue/lib/index.css';Vue.use(Avue);

全局配置

Vue.use(AVUE,{size:'', // 组件的尺寸,默认small。可选值 small/mini/mediumtableSize:'', //formSize:'', //appendToBody:true, //modalAppendToBody:true, //menuType:'', // 用于改变操作栏菜单按钮类型性,属性的组件的默认尺寸均为 text。可选值 button/icon/text/menuqiniu:{ // 七牛云配置    AK: '',SK: '',scope: '',url: '',deadline: 1  },ali:{ // 阿里云配置    region: '',endpoint: '',accessKeyId: '',accessKeySecret: '',bucket: '',},theme:'', // 主题颜色配置,属性的组件的默认白色。可选值 darkcanvas:{ // 水印配置    text: 'avuejs.com',fontFamily: 'microsoft yahei',color: "#999",fontSize: 16,opacity: 100,bottom: 10,right: 10,ratio: 1},});国际化

Avue 采用中文作为默认语言,同时支持多语言切换

import Vue from 'vue'import Avue from '@smallwei/avue'import zhLocale from '@smallwei/avue/lib/locale/lang/zh'import enLocale from '@smallwei/avue/lib/locale/lang/en'Vue.use(Avue, { enLocale })全局api$DialogForm弹窗表单$Clipboard复制到剪切板$ImagePreview图片预览$Print 打印插件$Export excel导出watermark全局水印downFile文件下载deepClone对象深拷贝validatenull判断空findNode数组中寻找对象findArray数组中寻找对象下标crud 配置项 option

crud 表格回调函数事件

on-load:这个事件会在表格所在的组件加载时就会执行,初始化表格数据。当表格翻页、页码变化时候也会自动执行该方法,使用了这个方法可以省略表格的current-change 、size-change两个回调函数。

current-change:表格页码发生变化时触发,第一个参数为当前页码。

Avue-crud 常用方法、属性(avoid什么用法)

size-change:表格页容量变化时触发,第一个参数就是当前页容量大小。

search-change :表格查询按钮回调函数,默认有两个参数 form与done, form为搜索框的值,done为关闭搜索的刷新状态回调函数。

row-save :表格新增表单确定按钮的回调函数,默认有三个参数分别为:row(表单的值),done(用于关闭表单回调函数),loading(页面loading状态) 。

row-update :表格行编辑确定按钮的回调,默认四个参数 row(当前行),index(索引),done(关闭弹框回调函数),loading(页面loading状态)。

row-del:表格操作行删除按钮回调函数,默认两个参数,row(当前行数据),index(当前索引) 。

refresh-change:表格的刷新按钮回调函数。

current-row-change:当前表格行被点击时的回调函数,第一个参数是当前行数据。

tree-load:表格行展开的懒加载回调,带三个参数 row(当前展开行的数据),treeNode(展开行节点数据),resolve(行懒加载的成功回调函数,在resolve里面将懒加载的数据传出去表格进行渲染)。

before-close:打开前的回调函数,两个参数done(用于关闭Dialog),type(当前窗口类型)。

before-close:关闭前的回调函数,done(用于关闭Dialog),type(当前窗口的类型)。

search-reset:点击清空按钮触发,清空搜索框回调函数。

selection-change:当表格选择项勾选发生变化时会触发该回调函数。

dateChange:dateBtn为true时的选择日期回调函数。

<avue-crudref="crud"data="data" // 表格显示的数据:option="option" // 表格配置项  :page.sync="page":permission="permission" // 表格按钮权限控制@on-load="onLoad"@current-change="currentChange"@size-change="pageSizeChange"@search-change="searchChange"@row-save="rowSave"@row-update="rowUpdate"@row-del="rowDel"@refresh-change="refreshChange"@current-row-change="handleCurrentRowChange"@tree-load="treeLoad"@before-open="beforeOpen"@before-close="beforeClose"@search-reset="searchReset"/>const option = {    'table-loading':'', // 表格等待框的控制    size:'', // 组件尺寸    maxHeight:'', // 表格的最大高度    index:'', // 是否有序号indexWidth:'', // 序号列宽度indexFixed:'', // 序号列是否冻结列    menu:'', // 是否有操作栏menuWidth:'', // 操作栏宽度menuTitle:'', // 操作栏标题menuFixed:'', // 操作栏列冻结列menuType:'', // 操作栏按钮样式menuHeaderAlign:'', // 操作栏表头的对齐方式    title:'', // 表格标题    addBtn:'', // 表格新增按钮;edit(修改)、del(删除)、view(查看)、update(修改)、save(保存)、cancel(取消)、search(查询)、empty(清空)    addBtnText:'', // 表格新增按钮文案    addBtnIcon:'', // 表格新增按钮图标    printBtn:'', // 表格打印按钮    excelBtn:'', // 表格导出按钮    filterBtn:'', // 表格自定义过滤按钮    refreshBtn:'', // 表格刷新数据按钮    columnBtn:'', // 表格列操作按钮    searchShowBtn:'', // 表格搜索显隐按钮    copyBtn:'', // 表格复制数据按钮    addTitle:'', // 表格新增弹窗标题 edit(修改)、view(查看)    dialogDrag:'', // 表格弹窗是否可以拖拽    searchIndex:'', // 表格搜索半收缩个数    searchPlaceholder:'', // 搜索项辅助文字    searchSpan:'', // 搜索项框栅列    searchGutter:'', // 搜索项框间距    searchLabelWidth:'', // 搜索项标题宽度    searchLabelPosition:'', // 搜索项标题位置    column:[ // 表格列配置        {            label:'', // 列标题            prop:'', // 列标题的内容属性名称            type:'', //            width:'', // 对应列的宽度            minWidth:'', // 对应列的最小宽度            fixed:'', // 列固定            sortable:'', // 对应列是否可以排序,监听 sort-change 回调,true, false, 'custom'            formatter:'', // 格式化列内容,(row, value, row, column)            overHidden:'', // 当内容过长被隐藏时显示 tooltip            align:'', // 对齐方式            headerAlign:'', // 表头对齐方式            filters:'', // 数据过滤的选项            search:'', // 是否为搜索项            searchValue:'', // 搜索项初始化值            searchPlaceholder:'', // 搜索项辅助文字            searchSpan:'', // 搜索项框栅列            searchOrder:'', // 搜索项位置排序,序号越大越靠前            searchLabelWidth:'', // 搜索项标题宽度            searchClearable:'', // 搜索项清除            searchMultiple:'', // 搜索项是否多选            searchTags:'', // 搜索项将选中值按文字的形式展示            display:'', // 弹出表单是否显示            disabled:'', // 弹出表单是否禁止            addDisabled:'', // 表单新增时项是否禁止,edit(编辑)、view(查看)            addDisplay:'', // 表单新增时项是否显示,edit(编辑)、view(查看)            resizable:'', // 对应列是否可以通过拖动改变宽度(需要在option中border属性为真)            searchClearable:'', // 搜索项清除            searchClearable:'', // 搜索项清除            searchClearable:'', // 搜索项清除            dicData:[ // 下拉项字典枚举                {label:'A',value: 'a'},            ],            rules:[ // 表单字段校验规则                {equired: true,message: "请输入姓名",trigger: "blur"},            ],            hide: false, // 隐藏列        }    ],};自定义内容<avue-crud :data="data" :option="option" ref="crud">  <!-- 左边插槽 --><template slot-scope="scope" slot="menuLeft"><el-button type="danger" @click="$refs.crud.rowAdd()">新增</el-button></template><!-- 右边插槽 --><template slot-scope="scope" slot="menuRight">    <el-button type="danger" @click=() => {}">刷新</el-button>  </template><!-- 自定义行内操作栏插槽 --><template slot-scope="{row,index}" slot="menu"><el-button @click="$refs.crud.rowEdit(row,index)">编辑</el-button><el-button @click="$refs.crud.rowDel(row,index)">删除</el-button></template><!-- 自定义弹窗内按钮插槽 --><template slot-scope="{row,index,type}" slot="menuForm"><el-button v-if="type=='add'" @click="$refs.crud.rowSave()">自定义新增</el-button><el-button v-if="type=='edit'" @click="$refs.crud.rowUpdate()>自定义修改</el-button><el-button @click="$refs.crud.closeDialog()">取消</el-button></template><!-- 自定义表单插槽,slot="propForm" --><template slot-scope="{type,disabled}" slot="nameForm"> // column: [{prop:'name',formslot:true}]    <el-tag v-if="type=='add'">新增</el-tag><el-tag v-else-if="type=='edit'">修改</el-tag><el-tag v-else-if="type=='view'">查看</el-tag><el-tag>{{user.name?user.name:'暂时没有内容'}}</el-tag><el-input :disabled="disabled" v-model="user.name"></el-input></template><!-- 自定义表单错误提示插槽,slot="propError" --><template slot-scope="{error}" slot="nameError"> // column: [{prop:'name',labelslot:true}]<p style="color:green">自定义提示{{error}}</p></template><!-- 自定义表单标题,slot="propLabel" --><template slot-scope="scope" slot="nameLabel"> // column: [{prop:'name',errorslot:true}]<span>姓名&nbsp;&nbsp;</span><el-tooltip class="item" effect="dark" content="文字提示" placement="top-start"><i class="el-icon-warning"></i></el-tooltip></template><!-- 向搜索表单插入一个额外的(column中没有的字段)输入框 --><template slot="search">    <el-form-item label="状态">    <el-input placeholder="状态" v-model="search.value"/>    </el-form-item></template><!-- 向表单中插入一个额外的输入框 --><template slot="menuForm">    <el-form-item label="维修">    <el-input placeholder="维修" v-model="search.value"/>    </el-form-item></template></avue-crud>
本文链接地址:https://www.jiuchutong.com/zhishi/289046.html 转载请保留说明!

上一篇:mkpasswd命令 生成用户的新密码(mksysb命令)

下一篇:拱门国家公园,犹他州莫阿布 (© Whit Richardson/Alamy Stock Photo)(拱门国家公园景点)

  • 华为手机卡怎么放卡槽里(华为手机卡怎么装)

    华为手机卡怎么放卡槽里(华为手机卡怎么装)

  • vivo NEX 3s是不是曲面屏手机吗(vivonex3s是不是双模5g)

    vivo NEX 3s是不是曲面屏手机吗(vivonex3s是不是双模5g)

  • 苹果正方形的按钮在哪(苹果正方形的按钮怎么关闭)

    苹果正方形的按钮在哪(苹果正方形的按钮怎么关闭)

  • 在qq中免费的气泡有哪些(在qq中免费的气泡是什么)

    在qq中免费的气泡有哪些(在qq中免费的气泡是什么)

  • 钉钉电脑版怎么退出全屏(钉钉电脑版怎么开启连麦)

    钉钉电脑版怎么退出全屏(钉钉电脑版怎么开启连麦)

  • 换手机后微信群不见了怎么办(换手机后微信群聊在哪里找出来)

    换手机后微信群不见了怎么办(换手机后微信群聊在哪里找出来)

  • 手机中毒会感染wifi吗(手机中毒会感染病毒吗)

    手机中毒会感染wifi吗(手机中毒会感染病毒吗)

  • vibe助听器是什么牌子(vibe助听器怎么样)

    vibe助听器是什么牌子(vibe助听器怎么样)

  • 华为手机出现个手掌标志(华为手机出现个小圆圈怎么去掉)

    华为手机出现个手掌标志(华为手机出现个小圆圈怎么去掉)

  • 魅族17和17pro的差异在哪里(魅族17和17pro的屏幕一样吗)

    魅族17和17pro的差异在哪里(魅族17和17pro的屏幕一样吗)

  • iphone11怎么没有震动(iPhone11怎么没有传输或还原)

    iphone11怎么没有震动(iPhone11怎么没有传输或还原)

  • 用户没有权限调用esb服务什么意思(用户没有权限调试怎么办)

    用户没有权限调用esb服务什么意思(用户没有权限调试怎么办)

  • ipad6是air2吗(平板6是air2吗)

    ipad6是air2吗(平板6是air2吗)

  • iphone11没有耳机转换头吗(iphone11没有耳机线送吗)

    iphone11没有耳机转换头吗(iphone11没有耳机线送吗)

  • 苹果电信版能用移动卡吗(苹果电信版可以用移动卡吗)

    苹果电信版能用移动卡吗(苹果电信版可以用移动卡吗)

  • 怎么把视频发到快手上(怎么把视频发到邮箱)

    怎么把视频发到快手上(怎么把视频发到邮箱)

  • 苹果x热点怎么设置人数(苹果x热点怎么限制流量)

    苹果x热点怎么设置人数(苹果x热点怎么限制流量)

  • 剪映音乐和文字怎么对应(剪映音乐文字怎么自动提取)

    剪映音乐和文字怎么对应(剪映音乐文字怎么自动提取)

  • 手机字体变成空心字,怎么办(手机字体变成空心字怎么还原)

    手机字体变成空心字,怎么办(手机字体变成空心字怎么还原)

  • qq音乐的收藏mv在哪(qq音乐的收藏如何转到酷狗音乐)

    qq音乐的收藏mv在哪(qq音乐的收藏如何转到酷狗音乐)

  • tim怎么发闪照(tim如何发闪照片)

    tim怎么发闪照(tim如何发闪照片)

  • 蚂蚁森林节气签怎么领(蚂蚁森林节气签领不到)

    蚂蚁森林节气签怎么领(蚂蚁森林节气签领不到)

  • 微信删除的好友对方能看到吗(微信删除的好友聊天记录怎么恢复)

    微信删除的好友对方能看到吗(微信删除的好友聊天记录怎么恢复)

  • 小米电视4a和4x的区别(小米电视4a和4c有什么区别哪个好)

    小米电视4a和4x的区别(小米电视4a和4c有什么区别哪个好)

  • 一个g是多少mb(一个g是多少mg)

    一个g是多少mb(一个g是多少mg)

  • 7z命令  文件解压缩命令(7z命令行详解)

    7z命令 文件解压缩命令(7z命令行详解)

  • fsview命令  文件系统浏览器(fsck命令详解)

    fsview命令 文件系统浏览器(fsck命令详解)

  • 村委会什么会计准则
  • 业务活动表本月数和本年累计数
  • 科目余额表解析
  • 简易计税36个月不能变指的是这个项目吗?
  • 小规模纳税人开具不动产发票税率
  • 企业所得税税率多少
  • 专用发票过期未抵扣怎么处理?
  • 出口货物退回需交税吗
  • 收到物业费普通发票做账
  • 会员卡退钱是退全额吗
  • 上月工资多计提了怎么调整
  • 出口退税总是差进项票怎么处理
  • 办公室租赁合同需要交哪些税额?
  • 企业拆迁补偿款要交哪些税
  • 脚手架出租生意
  • 所得税季报固定资产加速折旧表资产原值
  • 企业亏损需要缴税吗
  • 把十六点改成十五点半起床
  • 小规模增值税本期免税额怎么计算
  • 个体户核税怎么核
  • 供应商已注销欠的发票怎么办?
  • 转出未交增值税借方余额表示什么
  • 施工项目直接成本和间接成本
  • 预缴增值税抵扣销项税额账务处理
  • SWNETSUP.EXE - SWNETSUP是什么进程 有什么用
  • 接受捐赠收入要计入销售收入吗
  • php数组函数题目
  • 残疾人保障金汇算清缴填在哪里
  • php自动下载文件到本地
  • php面向对象优点,缺点
  • 铁路货物运输代理
  • 德纳里山
  • 房屋租赁经营要交哪些税
  • 福利部门领用原材料进项税额可以抵扣吗
  • 免税的农业企业可以抵扣专票吗
  • 房地产消防工程入什么科目
  • php中验证码如何实现登录验证
  • 如何写煎荷包蛋过程
  • yolov3图像识别
  • Vue3中的pinia使用(收藏版)
  • echarts中国地图代码
  • 浅谈人工智能时代财务会计向管理会计的转型
  • php设置目录权限
  • 成本会计科目的三级科目有哪些
  • 公司购买的房屋怎么入账
  • 企业所得税季初和季末怎么算
  • 手机充值如何开公司发票
  • 小规模附加税减免政策2023
  • 根据《中华人民共和国食品安全法》
  • 应付利息增加说明企业什么
  • 个人所得税10月份申报期
  • 劳务公司的账务处理会计分录
  • 新领的发票怎么导入uk开票系统
  • 库存商品坏账准备怎么算
  • 事业单位私车公用如何处罚
  • mysql批量删表
  • redhat系统安装gvim
  • 取消windows开机登录密码
  • win7系统关机很慢什么原因
  • windows sky high
  • win10升级2020
  • centos用户添加到组
  • SMceMan.exe - SMceMan进程是什么意思
  • centos init
  • linux下时间同步的两种方法分享
  • .msc是什么文件
  • win7电脑dpi怎么设置800
  • msng.exe是什么
  • 删除同步中心图标
  • ext.grid.gridpanel
  • cocos2djs教程
  • cocos-2dx
  • unity资源文件
  • xcopy命令怎么用
  • js函数里的函数怎么调用
  • Android-SQLite商业化数据库操作
  • javascript面向
  • 用python编写的程序称为
  • 期初库存和期末库存是什么意思
  • 公司购买车辆是什么费用
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设