avue学习总结
白泽语
一、基本属性与方法
基础的表格属性
<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"> //打开表格页面的方法，一般用来初始化，返回页面数据
</avue-crud>
<script>
export default {
data() {
return {
form: {},
type: "",
page: {
pageSize: 10,
currentPage: 1,
total: 0,
},
selectionList: [],
option: {
height:'auto', //表格高度
emptyText: "暂无数据哦~",//数据为空的提示
calcHeight: 30, //表格高度差（主要用于减去其他部分让表格高度自适应）
tip: false, //弹框文字提示
searchShow: true, //首次加载是否显示搜索
searchMenuSpan: 4, //搜索按钮长度
searchSpan:6, //搜索框长度 最大长度24
border: true, //表格边框是否显示
index: true, //是否显示序号
indexLabel: "序号", // 序号标题
viewBtn: true, //是否显示查看按钮
printBtn: true //打印按钮
refreshBtn: true // 刷新按钮
viewBtn: true, //查看按钮
editBtn: false, // 行内编辑按钮
delBtn: false, // 行内删除
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", //输入框类型 默认为input 还有tree
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选择框匹配
editDisplay: false, // 编辑按钮是否可见
multiple: true, //选着多个
},
{
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,
},
]
// 传入静态字典
dicData: [],
// 字典参数 props 匹配后台字段
props: {
value: "sysId",
label: "name",
},
//字典地址
dicUrl: "/api/blade-system/dict/dictionary?code=exam_state",
//验证
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;
this.selectionClear();
});
},
},
};
</script>
<style>
</style>
done(); // 关闭表单
loading(); // 按钮停止加载以下的内容暂时没有总结
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,
},
{
label: "保护方式", //select详细参数
prop: "regionType",
width: 150, //表格宽度
search: true, //是否搜索
searchMultiple: true, //选择框是否多选
searchTip: '请选择保护方式', //选择框默认提示
searchSpan: 8, //搜索按钮宽度
searchLabelWidth: 100, //搜索框宽度
overHidden: true, //表格超出长度自动隐藏
type: 'select', //选择框类型
dicUrl: "/api/blade-system/dict-biz/dictionary?code=region_type", //字典表
的后台接口url
searchMultiple: true, //搜索表单的是否多选
searchTags: true, //多选时是否将选中值按文字的形式展示
searchFilterable:true, //是否可以输入搜索
props: {
label: "dictValue", //展示的值，页面上看到的
value: "dictKey" //传给后台接口的值，后台实际接收的值
},
dataType: "string", //数据类型
rules: [{
required: true,
message: "请选择保护方式",
trigger: "blur"
}]
},
],
},
]
{
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;
getList1(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();
});
},
类似资料：