原文链接：www.jianshu.com/p/a64ef0c4c…
avue-crud 配置项介绍
<avue-crud :option="option" //表格配置属性
:table-loading="loading" //表格等待框的控制，加载的时候转圈圈，设置true/false
:search.sync="search" //搜索的变量(需要sync修饰符)
:visible.sync="changeInfo" //是否显示，设置true/false
:data="data" //表格显示的数据
:page.sync="page" //表格分页配置选项(需要sync修饰符)
:permission="permissionList" //权限控制
:before-open="beforeOpen" //打开前的回调function(file,column)
v-model="form" //数据模型 用来存取页面值的
ref="crud" //在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；
@cell-click="pageto" //表格点击运行方法 onclick方法定义
@row-update="rowUpdate"
@row-save="rowSave" //新增数据后点击确定触发该事件
@row-del="rowDel" //行数据删除时触发该事件
@row-click="handleRowClick" //单击行运行的方法
@search-change="searchChange" // 搜索框发生变化
@search-reset="searchReset" // 清空搜索框
@selection-change="selectionChange"
@current-change="currentChange" //点击页码会调用current-change方法回调当前页数，返回当前第几页
@size-change="sizeChange" //点击每页多少条会调size-change方法回调
@refresh-change="refreshChange" //点击刷新按钮触发该事件
@on-load="onLoad"> //打开表格页面的方法，一般用来初始化，返回页面数据
crud option参数介绍
option: {
height:'auto', //表格高度
calcHeight: 30, //表格高度差（主要用于减去其他部分让表格高度自适应）
tip: false,
searchShow: true, //首次加载是否显示搜索
searchMenuSpan: 4, //搜索按钮长度
searchSpan:6, //搜索框长度 最大长度24
border: true, //表格边框是否显示
index: true, //是否显示序号
viewBtn: true, //是否显示查看按钮
selection: true,
dialogClickModal: false,
addBtn:false, //是否显示添加按钮
editBtn:false, //是否显示编辑按钮
delBtn:false, //是否显示删除按钮
excelBtn:false, //表格导出按钮是否显示
labelWidth:120, //表单前面的标题长度
refreshBtn: false, //表格上面小的 刷新按钮
columnBtn: false, //表格上面小的 列表按钮
searchBtn: false, //表格上面小的 搜索按钮
menu: true, //是否显示操作栏
}
crud colum属性简介
column:[
{
label: "狩猎方法",
prop: "way",
type: "input", //输入框类型
addDisplay: false, //新增时是否显示
editDisplay: false, //编辑时是否显示
viewDisplay: true, //详情时是否显示
hide: true, //表单查询时是否显示
display: true, //在查看，新增，编辑页面是否显示
span: 24, //24一条数据占一行，8一行3条数据
addDisabled: true, //添加的时候不能修改
editDisabled: true, //编辑的时候不能修改
sortable:true, //排序方式切换，倒序、正序切换
},
{
labelWidth: 0,
label: '',
prop: 'info',
span: 24,
addDisplay: false,
hide: true,
slot: true, //加一个插槽 子表可以放这里
}
]
crud group简介
group: [
{
label: '基本信息',
prop: 'jbxx',
icon: 'el-icon-edit-outline',
display: true, //是否显示
column: [
{
label: "主体类型",
prop: "relType1",
search: false,
span: 8,
editDisabled: true,
},
{
label: "主体名称",
prop: "name",
span: 8,
search: false,
editDisabled: true,
}
]
},
{
label: '申请信息',
prop: 'jbxx',
span: 8,
icon: 'el-icon-edit-outline',
arrow: true,
column: [
{
label: "申请类型",
prop: "breedType1",
span: 8,
hide: true,
editDisabled: true,
},
],
},
]
crud之column个别解释
{
border: true,//表格是否显示边框
index: true,///表格是否显示序号
selection: true,//表格是否显示可选select
dic:['GRADE','SEX'],//传入需要获取字典的变量，看vuex中的getDic方法
column: [
{
label: "用户名",//表格的标题
prop: "username",//表格的key
width: "150",//表格的宽度
fixed: true,//是否冻结列
hide:true,//是否隐藏
type:'select', //select | radio | checkbox | date 默认为text
visdiplay:true,//表单不显示
overHidden: true,//超出省略号显示
dicData: 'GRADE', //传入需要引用的字典
],//type的数据字典,当type为：select | radio | checkbox 加载
dataDetail: val => {
return ``;//是否对列表数据处理
},
rules: [{ //表单校验规则
required: true, //是否必填
message: "请输入用户名", //提示信息
trigger: "blur" }]
}
}
日期分页
// 日期
{
label: "开始时间",
prop: "startTime",
type: "datetime",
format: "yyyy-MM-dd hh:mm:ss",
rules: [{
required: false,
message: "请输入开始时间",
trigger: "blur"
}]
},
// 分页
{
"total": 40,
"pagerCount": 5,
"currentPage": 1,
"pageSize": 20,
"pageSizes": [ 10, 20, 30, 40, 50, 100 ],
"layout": "total, sizes, prev, pager, next, jumper",
"background": true
}
事件
// 首次加载调用on-load方法加载数据，返回page分页对象信息,赋值page的total总条数即可,如果total为0的话，
// 或者simplePage为true只有1页的时候，分页选择器会隐藏，我们需要隐藏分页栏，设置onload方法total为0就可以了
onLoad1(infoPage, params = {}) {
this.infoLoading = true;
getList(this.parentId, infoPage.currentPage, infoPage.pageSize,
Object.assign(params, this.infoQuery)
).then(res => {
const data = res.data.data;
this.infoPage.total = 0;
this.infoData = data.records;
this.infoLoading = false;
this.selectionClear();
});
},
生命周期及事件
beforeCreate
created
beforeMount
mounted
(
beforeUpdate
updated
)
beforeDestroy
destroyed
const validatePhone = (rule, value, callback) => {
if (isvalidatemobile(value)[0]) {
callback(new Error(isvalidatemobile(value)[1]));
} else {
callback();
}
};
option: {
height:'auto', //表格高度
emptyText: "暂无数据哦~",//数据为空的提示
calcHeight: 30, //表格高度差（主要用于减去其他部分让表格高度自适应）
tip: false,
searchShow: true, //首次加载是否显示搜索
searchMenuSpan: 4, //搜索按钮长度
searchSpan:6, //搜索框长度 最大长度24
searchLabelWidth: 85, //搜索框标题宽度 默认80
border: true, //表格边框是否显示
index: true, //是否显示序号
viewBtn: true, //是否显示查看按钮
selection: true,
dialogClickModal: false,
addBtn:false, //是否显示添加按钮
editBtn:false, //是否显示编辑按钮
delBtn:false, //是否显示删除按钮
excelBtn:false, //表格导出按钮是否显示
labelWidth:120, //表单前面的标题长度
refreshBtn: false, //表格上面小的 刷新按钮
columnBtn: false, //表格上面小的 列表按钮
searchBtn: false, //表格上面小的 搜索按钮
menu: true, //是否显示操作栏
defaultExpandAll:true, //树默认展开
column:[
{
label: "狩猎方法",
prop: "way",
type: "input", //输入框类型
addDisplay: false, //新增时是否显示
editDisplay: false, //编辑时是否显示
viewDisplay: true, //详情时是否显示
hide: true, //表单查询时是否显示
display: true, //在查看，新增，编辑页面是否显示
span: 24, //24一条数据占一行，8一行3条数据
addDisabled: true, //添加的时候不能修改
editDisabled: true, //编辑的时候不能修改
sortable:true, //排序方式切换，倒序、正序切换
maxlength: 30, //字数限制
showWordLimit:true, //显示字数限制
defaultExpandAll:true, //树默认展开
search：true, //查询是否显示
searchFilterable:true, //select选择框匹配
showColumn:false, //列显隐中是否有
},
{
labelWidth: 0,
label: '',
prop: 'info',
span: 24,
addDisplay: false,
hide: true,
formslot: true, //加一个插槽 子表可以放这里
},
{
label: "当前完成进度",
prop: "completePer",
formatter: (row, value) => { //拼接字符串的用法 formatter
return value + '%'
},
addDisplay: false,
editDisplay: true,
formslot: true,
},
{
label: "电话",
prop: "phone",
rules: [{
required: true,
message: "请输入电话",
trigger: "blur",
validator: validatePhone //输入数据校验方法
}]
},
]
rowSave(row, done, loading) {
row.type = 1;//添加type属性
row.attachIds = this.attachIds
this.$delete(row, 'imgs') //删除imgs属性
this.$delete(row, 'code')
this.$delete(row, 'wetlandLevelCodes')
this.$delete(row, 'videoUrl')
row.fileList = this.file.fileList
add(row).then(() => {
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
done();
}, error => {
window.console.log(error);
loading();
});
this.attachIds = []
this.file.fileList = []
},
cellStyle({row,column,rowIndex,columnIndex}){
if(columnIndex==6){
if(row.sex==1){
return {
// color:'#45b4ea',
fontWeight:'bold',
fontSize:'20'
}
}else{
return {
// color:'#f14e95',
fontWeight:'bold',
fontSize:'20'
}
}
}
},
<template>
<!-- 基础组件 -->
<basic-container>
<!-- <el-button @click='exportHandle'>导出</el-button> -->
<avue-crud
设置表格属性
:option="option"
用来存取页面的值
v-model="form"
获取后台数据
:data="data"
加载动画
:table-loading="loading"
分页
:page="page"
权限控制 操作按钮动态显示
:permission="permissionList"
打开前回调
:before-open="beforeOpen"
关闭前回调
:before-close="beforeClose"
获取dom 结构
ref="crud"
数据编辑后出发
@row-update="rowUpdate"
新增数据确定后执行
@row-save="rowSave"
行删除
@row-del="rowDel"
点击搜索后触发该事件
@search-change="searchChange"
清空搜索回调方法
@search-reset="searchReset"
当选择项发生变化时会触发该事件
@selection-change="selectionChange"
@current-change="currentChange"
点击每页多少条
@size-change="sizeChange"
点击刷新
@refresh-change="onLoad(page)"
初始化页面
@on-load="onLoad"
>
自定义按钮
<template slot-scope="scope" slot="menu">
<el-button @click="submitHandle(scope.row)">提交</el-button >
</template>
<template slot-scope="{ row }" slot="status">
更改表格内容
<el-tag v-if="row.status == 0">待审</el-tag>
<el-tag v-else-if="row.status == 1" type="info">审批中</el-tag>
</template>
</avue-crud>
</basic-container>
</template>
<script>
export default {
data() {
return {
form: {},
type: "",
page: {
pageSize: 10,
currentPage: 1,
total: 0,
},
selectionList: [],
option: {
//列的对其方式
align:'left',
//表格宽度
width: '100%',
//表格高度差（主要用于减去其他部分让表格高度自适应）
calcHeight: 'auto',
//表格高度
height: 'auto',
//表格最大高度
maxHeight: 'auto',
// 弹框文字提示
tip: false,
// 边框
border: true,
// 显示序号
index: true,
// 序号标题
indexLabel: "序号",
//打印按钮
printBtn: true
// 刷新按钮
refreshBtn: true
// 查看按钮
viewBtn: true,
// 行内编辑按钮
editBtn: false,
// 行内删除
delBtn: false,
//首次加载是否显示搜索
searchShow: true,
editBtnText:'编辑文案',
viewBtnText:'查看文案',
printBtnText:'打印文案',
excelBtnText:'导出文案',
updateBtnText:'修改文案',
saveBtnText:'保存文案',
cancelBtnText:'取消文案',
//弹框宽度控制
dialogWidth: 600,
column: [
{
label: "请假人",
//匹配后端字段
prop: "userId",
//输入框状态控制 默认为input
type: "tree",
//type:input/input/select/radio/checkbox/textarea/cascader/date/time/datetime
/daterange/timerange/datetimerange/week/month/year/dates/password/switch/tree/number
maxRows:4,//最大行（当type为textarea,当number时最大值）
minRows:2,//最小行（当type为textarea，当number时最小值）
// 搜索栏目自定义内容 同时控制页面显示隐藏
search: true,
//表单编辑时是否禁止输入
editDisabled: true,
//表单新增时是否禁止输入
addDisabled: true,
//隐藏显示当前项
display: false,
// 表单新增是可见
addDisplay: false,
// 表单查看是否可见
viewDisplay: true,
// 编辑按钮是否可见
editDisplay: false,
// 隐藏列
hide: true,
//选着多个 当type为tree生效
multiple: true,
// 传入静态字典
dicData: [],
// 字典参数 props 匹配后台字段
props: {
value: "sysId",
label: "name",
},
//字典地址
dicUrl: "/api/blade-system/dict/dictionary?code=exam_state",
//时间格式
format: "yyyy-MM-dd hh:mm:ss",
valueFormat: "yyyy-MM-dd hh:mm:ss",
//验证
rules: [
{
required: true,
message: "请选择请假人",
trigger: "blur",
},
],
},
data: []
};
},
mounted() {
// 当字典数据需要前端转换时 获取请假人id 通过接口 添加字典数据
personnel(1, 10000, {
is_deleted: 0,
}).then((res) => {
this.option.column.forEach((item) => {
if (item.prop == "userId") {
item.dicData = res.data.data.records;
}
});
});
},
methods: {
onLoad(page, params = {}) {
this.loading = true
getList(
page.currentPage,
page.pageSize,
Object.assign(params, this.query)
).then((res) => {
//渲染数据
const data = res.data.data;
this.page.total = data.total;
this.data = data.records;
this.loading = false;
});
},
},
};
</script>
<style>
</style>
