【vue】avue-crud配置大全-持续更新

1.表格属性

width: '100%',//表格宽度
calcHeight: 'auto',//表格高度差（主要用于减去其他部分让表格高度自适应）
height: 'auto',//表格高度
maxHeight: 'auto',//表格最大高度
border: true,//是否显示表格边框
expand: false,//是否展开折叠行
index: false,//是否显示表格序号（根据分页会自动计算，比如每页10行，到了第二页就会从11开始记数）
indexLabel: '#',//序号的标题
stripe: true,//是否显示表格的斑马条纹
showHeader: true,//是否显示表格的表头
defaultSort:表格的排序字段{prop:'date',order:'descending/ascending'} prop默认排序字段，order排序方式
align: 'center',//表格列对其方式left/center/right
menu: true,//是否显示操作菜单栏
menuWidth: 240,//操作菜单栏的宽度
menuAlign: 'left',//菜单栏对齐方式left/center/right
searchSize: 'small',//搜索控件的大小small/mini
columnBtn: true,//列显隐按钮
refreshBtn: true,//刷新按钮
addBtn: true,//添加按钮
searchBtn: true,//搜索显隐按钮（当column中有搜索的属性，或则searchslot为true时自定义搜索启动起作用）
editBtn: true,//行内编辑按钮
delBtn: true,//行能删除按钮

2.列属性

label: '姓名',//列名称
prop: 'name',//列字段
placeholder: '请输入姓名',//控件提示输入语句
align: 'left',//列的对其方式，覆盖table的align
width: 100,//列宽度
minWidth: 'auto',//列最小宽度
sortable: false,//排序
hide: true,//隐藏列 表格起作用
span: 12,//表单栅列
precision: 2,//数字框输入精度（当type为number时）
search: false,//是否支持搜索
maxRows: 4,//最大行（当type为textarea）
minRows: 2,//最小行（当type为textarea）
multiple: false,//多选（当type为select/tree时）
format: "",//显示值时间格式
valueFormat: "",//真实值的时间格式
clearable: true,//表单清空
size: 'medium',//表单大小medium/small/mini
editDisabled: false,//表单编辑时是否禁止
editDisplay: false,//表单编辑是否可见
addDisabled: false,//表单编辑时是否禁止
addDisplay: false,//表单编辑是否可见
slot: false,//列自定义 支持自定义列
formslot: false,//表单自定义
fixed: true,//冻结列
formWidth: 'auto',//表单宽度
formHeight: 'auto',//表单行高度
overHidden: false,//超出隐藏
rules: //表单规则,参考ele表单规则配置Object
dicData: //传入本次需要的静态字典（在column中dicData写对象key值即可加载）
dicMethod: //传入字典的请求方式
dicQuery: //传入字典的请求参数Object
dicUrl: //字典的网络请求接口（例如配置/xxx/xx/{{key}},这样的格式，在column中dicData自动匹配prop字段名）

3.表格事件

:before-open=“beforeOpen”

//1.说明：
/*
1.新增、编辑和查看操作，弹框打开前调用的方法
2.done() 调用后继续往后
3.type有add,edit,view三种
*/
//2.用法示例：
beforeOpen(done, type) {if (["add", "edit"].includes(type)) {//    this.initData();  做一些初始化的操作，例如给某个字段加上自定义配置}if (["edit", "view"].includes(type)) {/*这里查询操作，可以初始化表单one(this.form.id).then(res => {this.form = res.data.data;});*/}done();
}
/*
initData(){const column = this.findObject(this.option.column,"name");column.dicData = [{'key':'1','value':'张三'];
}*/

:before-close=“beforeClose”

//1.说明：
/*
1.弹框关闭前调用的方法
2.done() 继续往下，正常关闭
*/
//2.用法示例：
beforeClose(done) {this.$refs.crud.tableForm = {};//清空表单this.$refs.crud.value.name = "";//清空某个值this.$refs.crud.value.addDisabled = false;/*修改option.column中的值this.$refs.crud.option.column.filter(item => {if (item.prop === "parentId") {item.value = "";item.addDisabled = false;}});*/done();
}

:cell-class-name=“addClass”

//1.说明：
/*
1.可以给cell添加自定义样式
2.addClass自定义方法，取名任意
3.row:行对象，column列对象，rowIndex行索引，columnIndex列索引
4.给具体某一行或某一列添加一个样式，然后定义样式class
*/
//2.用法示例：
addClass({row,column,rowIndex,columnIndex}){if(column.property == 'name'){return "nameStyle";}
}
//scss样式
/deep/ .nameStyle span>span{background-color: #ecf5ff;border-color: #d9ecff;height: 32px;padding: 0 10px;line-height: 30px;font-size: 12px;color: #409EFF;border-width: 1px;border-style: solid;box-sizing: border-box;white-space: nowrap;display: inline-block;
}

:page与:on-load

//page分页需要加on-load事件，否则翻页、跳转点击无反应
<template><avue-crud:data="data":option="option":page="page":table-loading="tableLoading"@on-load="onLoad"
></avue-crud>
</template>
<script>export default {data() {return {tableLoading: false,searchForm:{},page: {pageSize: 20,currentPage: 1,total: 0},data: [],option: {align: 'center',menuAlign: 'center',column: [{label: '姓名',prop: 'name'},{label: '性别',prop: 'sex'}]}}},methods:{onLoad(page) {//查询参数，这里需指定自己的请求参数var params = this.searchForm;//请求后端方法，这里需指定自己的请求方式getRequest(Object.assign({current: page.currentPage,size: page.pageSize,},params)).then((response) => {this.data = response.data.records;this.page.currentPage = response.data.current;this.page.pageSize = response.data.size;this.page.total = response.data.total;this.tableLoading = false;});}}}
</script>

【vue】avue-crud配置大全-持续更新相关推荐

FC金手指代码大全·持续更新-亲测可用-FC 经典游戏完整可用的金手指大全---持续更新，偶尔玩玩经典回味无穷，小时候不能通关的现在通通通关一遍
FC 经典游戏完整可用的金手指大全-持续更新,偶尔玩玩经典回味无穷,小时候不能通关的现在通通通关一遍 2021年5月11日更新: 每次翻金手指一些垃圾小网站标题党吸引进去吓一大堆木马什么也没有,什么x ...
adb 输入回车命令_Android超级终端（Adb Shell)常用命令、命令大全-持续更新 | 何连超的博客小站...
Android超级终端(Adb Shell)常用命令.命令大全-持续更新超级终端(手机端操作)与AdbShell(电脑端操作)使用的Shell命令(即Linux shell命令,类似Dos命令)是相 ...
JAVA面试大全(持续更新中...)
本文旨在收集Java面试过程中出现的问题,力求全面,仅作学习交流,欢迎补充,持续更新中-,部分段落选取自网上,部分引用文章已标注,部分已记不清了,如侵权,联系本人 Java基础 1.面向对象的概述面 ...
Unity游戏优化指南大全(持续更新中！)
Unity游戏优化指南大全三个官方优化提示: 性能和优化 (Performance and Optimization) - 关于性能分析器以及性能和优化技巧的 Unity 学习教程. Best pr ...
前端面试题汇总大全 -- 持续更新！
文章目录一.html 系列 ⭐⭐⭐⭐⭐ 1.H5新增特性和css3新增特性? 2.什么是HTML5,以及和HTML的区别是什么? 3.说说你对 Dom 树的理解? 4.跨域时怎么处理 cookie? ...
从零开始的linux_manjaro+vim+fish shell+i3酷炫操作和配置（持续更新中......）
本博客最新更新于 2021年11月18日一.前言笔者此前几乎没有vim使用经验,也没有安装过linux虚拟机,偶然在b站上看到TheCW的视频,遂惊异于linux和vim配合的巧妙与vim配置和f ...
Fedora的安装与配置（持续更新）
写在前面,写给自己作为一只励志从小白变为可爱的大白的小姐姐来说,从windows系统到linux(fedora)系统,是一个逆生长的过程. 本来想装一个双系统,但装完后把进不去原来的windows系 ...
前端面试题大全持续更新中……
目录 1.nextTick知道嘛,实现原理是什么? 2.检测数据类型的方法 3.vue切换路由不重新渲染_Vue路由切换时页面内容没有重新加载 4.JavaScript开发中的23种设计模式详解 5. ...
Git使用技巧（1）-- 配置【持续更新】
配置名字和邮箱 git config --global user.name "Your Name" git config --global user.email "ema ...

【vue】avue-crud配置大全-持续更新

1.表格属性

2.列属性

3.表格事件

:before-open=“beforeOpen”

:before-close=“beforeClose”

:cell-class-name=“addClass”

:page与:on-load

【vue】avue-crud配置大全-持续更新相关推荐

最新文章

热门文章