1.avue-crud 配置項個參數(shù)簡介
<avue-crud :option="option" //表格配置屬性
:table-loading="loading" //表格等待框的控制趋翻，加載的時候轉(zhuǎn)圈圈，設(shè)置true/false
:search.sync="search" //搜索的變量(需要sync修飾符)
:visible.sync="changeInfo" //是否顯示，設(shè)置true/false
:data="data" //表格顯示的數(shù)據(jù)
:page.sync="page" //表格分頁配置選項(需要sync修飾符)
:permission="permissionList" //權(quán)限控制
:before-open="beforeOpen" //打開前的回調(diào)function(file,column)
v-model="form" //數(shù)據(jù)模型 用來存取頁面值的
ref="crud" //在普通的 DOM 元素上使用再芋，引用指向的就是 DOM 元素渣触；
@cell-click="pageto" //表格點擊運行方法 onclick方法定義
@row-update="rowUpdate"
@row-save="rowSave" //新增數(shù)據(jù)后點擊確定觸發(fā)該事件
@row-del="rowDel" //行數(shù)據(jù)刪除時觸發(fā)該事件
@row-click="handleRowClick" //單擊行運行的方法
@search-change="searchChange"
@search-reset="searchReset"
@selection-change="selectionChange"
@current-change="currentChange" //點擊頁碼會調(diào)用current-change方法回調(diào)當前頁數(shù)齿诉，返回當前第幾頁
@size-change="sizeChange" //點擊每頁多少條會調(diào)size-change方法回調(diào)
@refresh-change="refreshChange" //點擊刷新按鈕觸發(fā)該事件
@on-load="onLoad"> //打開表格頁面的方法嗦锐，一般用來初始化橄霉，返回頁面數(shù)據(jù)
2.Avue-crud之option參數(shù)配置項簡介
option: {
height:'auto', //表格高度
calcHeight: 30, //表格高度差（主要用于減去其他部分讓表格高度自適應(yīng)）
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, //表格導(dǎo)出按鈕是否顯示
labelWidth:120, //表單前面的標題長度
refreshBtn: false, //表格上面小的 刷新按鈕
columnBtn: false, //表格上面小的 列表按鈕
searchBtn: false, //表格上面小的 搜索按鈕
menu: true, //是否顯示操作欄
3.crud之column解釋
column:[
{
label: "狩獵方法",
prop: "way",
type: "input", //輸入框類型
addDisplay: false, //新增時是否顯示
editDisplay: false, //編輯時是否顯示
viewDisplay: true, //詳情時是否顯示
hide: true, //表單查詢時是否顯示
display: true, //在查看窃爷，新增，編輯頁面是否顯示
span: 24, //24一條數(shù)據(jù)占一行，8一行3條數(shù)據(jù)
addDisabled: true, //添加的時候不能修改
editDisabled: true, //編輯的時候不能修改
sortable:true, //排序方式切換吞鸭，倒序寺董、正序切換
},
{
labelWidth: 0,
label: '',
prop: 'info',
span: 24,
addDisplay: false,
hide: true,
slot: true, //加一個插槽 子表可以放這里
}
]
4.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,
},
],
},
]
5.crud之column個別解釋
{
border: true,//表格是否顯示邊框
index: true,///表格是否顯示序號
selection: true,//表格是否顯示可選select
dic:['GRADE','SEX'],//傳入需要獲取字典的變量，看vuex中的getDic方法
column: [
{
label: "用戶名",//表格的標題
prop: "username",//表格的key
width: "150",//表格的寬度
fixed: true,//是否凍結(jié)列
hide:true,//是否隱藏
type:'select', //select | radio | checkbox | date 默認為text
visdiplay:true,//表單不顯示
overHidden: true,//超出省略號顯示
dicData: 'GRADE', //傳入需要引用的字典
],//type的數(shù)據(jù)字典,當type為：select | radio | checkbox 加載
dataDetail: val => {
return ``;;//是否對列表數(shù)據(jù)處理
},
rules: [{ //表單校驗規(guī)則
required: true, //是否必填
message: "請輸入用戶名", //提示信息
trigger: "blur" }]
}
}
6.日期刻剥、分頁
日期
{
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
}
7.事件
//首次加載調(diào)用on-load方法加載數(shù)據(jù)遮咖，返回page分頁對象信息,賦值page的total總條數(shù)即可,如果total為0的話，或者simplePage為true只有1頁的時候造虏，分頁選擇器會隱藏御吞，我們需要隱藏分頁欄，設(shè)置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();
});
},
8.生命周期及事件
beforeCreate
created
beforeMount
mounted
(
beforeUpdate
updated
)
beforeDestroy
destroyed
