常用的兩個avue文檔：
avue 模糊搜索
常用的寫法：
1、crud表單聯動：通過watch 判斷操作clumns數據
watch: { chargeType: function(value) { const column1 = this.tableOption.column[9] //客戶號 const column2 = this.tableOption.column[10] //渠道號 if (value.value === 'YONYOU_PAYFORM') { column1.display = true column2.display = true } else { column1.display = false column2.display = false } } },
2、columns項顯示和隱藏
//針對form addDisplay: false, // 添加彈窗不顯示 editDisplay: false, // 編輯 viewDisplay: false // 查看 hide:true //針對table的 disabled:true, //表單item禁用
3、樣式
searchLabelWidth:30, // 搜索框的lable寬度
4、表格右側按鈕顯示隱藏
refreshBtn: false,
columnBtn: false,
searchBtn：false
其他說明：
<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"> //打開表格頁面的方法，一般用來初始化，返回頁面數據
option: { height:'auto', //表格高度 emptyText: "暫無數據哦~",//數據為空的提示 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, //是否顯示操作欄 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, }, ]
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" }] }, { label: "年份", prop: "sendTime", type: "year", format: 'yyyy', valueFormat: "yyyy", width: 80, 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(); }); },
{ label: '湖泊濕地', headerAlign: 'center', //標題居中 children: [ { label: "小計", prop: "lakeSum", rules: [{ required: true, message: "請輸入湖泊濕地_小計", trigger: "blur" }] }, { label: "永久性淡水湖", prop: "lakeForever", hide:false, rules: [{ required: true, message: "請輸入永久性淡水湖", trigger: "blur" }] }, ] },
// 保存的時候對保存的對象添加、刪除屬性
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 = [] },
更多內容可以看文檔：https://www.avuejs.com/crud
開發指南：https://www.bookstack.cn/read/avue-2.x/391487d752fdf241.md