1. yarn add element

2. 安裝Aue

在Plugins中建立Avue.js

npm i @smallwei/avue -Simport Avue from '@smallwei/avue'; import '@smallwei/avue/lib/index.css'; Vue.use(Avue);

2. Vue.js - 在項(xiàng)目中使用Sass、SCSS的方法（安裝sass-loader）

默認(rèn)情況下?Vue.js?是不支持?Sass、SCSS?的，如果想要使用它們，只需要一些簡單的安裝配置即可。

?

1，安裝依賴包

（1）進(jìn)入項(xiàng)目文件夾，執(zhí)行如下兩個(gè)命令安裝相關(guān)的依賴包。

1 2	npm install --save-dev sass-loader npm install --save-dev node-sass

（2）接著編輯?build?文件夾下的?webpack.base.conf.js?文件，在?rules?里面添加如下配置：

1 2 3 4

{ ??test: /\.sass$/, ??loaders: ['style',?'css',?'sass'] }

4. 事件：

https://avuejs.com/doc/crud/crud-doc

Events

事件名說明參數(shù)

current-change	切換頁面時(shí)觸發(fā)該事件	page
current-row-change	當(dāng)表格的當(dāng)前行發(fā)生變化的時(shí)候會觸發(fā)該事件，如果要高亮當(dāng)前行，請打開表格的highlightCurrentRow屬性為true	currentRow,oldCurrentRow
select	單個(gè)選擇回調(diào)	selection, row
selectAll	勾選全選	selection
date-change	表格日期回調(diào)方法	date
filter-change	過濾回調(diào)函數(shù)	params
cell-mouse-enter	當(dāng)單元格 hover 進(jìn)入時(shí)會觸發(fā)該事件	row, column, cell, event
cell-mouse-leave	當(dāng)單元格 hover 退出時(shí)會觸發(fā)該事件	row, column, cell, event
cell-click	當(dāng)某個(gè)單元格被點(diǎn)擊時(shí)會觸發(fā)該事件	row, column, cell, event
cell-dblclick	當(dāng)某個(gè)單元格被雙擊擊時(shí)會觸發(fā)該事件	row, column, cell, event
row-update	編輯數(shù)據(jù)后確定觸發(fā)該事件	row,index,done,loading
row-save	新增數(shù)據(jù)后點(diǎn)擊確定觸發(fā)該事件	row,done,loading
row-del	行數(shù)據(jù)刪除時(shí)觸發(fā)該事件	row,index
row-click	當(dāng)某一行被點(diǎn)擊時(shí)會觸發(fā)該事件	row,event,column
row-dblclick	當(dāng)某一行被雙擊時(shí)會觸發(fā)該事件	row,column
refresh-change	點(diǎn)擊刷新按鈕觸發(fā)該事件	page
size-change	頁面每頁顯示的條數(shù)觸發(fā)該事件	pageSize
sort-change	調(diào)用排序后觸發(fā)該事件	list
search-change	點(diǎn)擊搜索后觸發(fā)該事件	params,done
search-reset	清空搜索回調(diào)方法	-
selection-change	當(dāng)選擇項(xiàng)發(fā)生變化時(shí)會觸發(fā)該事件	selection
toggleRowExpansion	用于可展開表格，切換某一行的展開狀態(tài)，如果使用了第二個(gè)參數(shù)，則是設(shè)置這一行展開與否（expanded 為 true 則展開	row, expanded ? ?

?

6. 分頁

{ "total": 200, "pagerCount": 5, "currentPage": 1, "pageSize": 20, "pageSizes": [ 10, 20, 30, 40, 50, 100 ], "background": true }

7. 搜索自定義

<avue-crud :option="option" :data="data" @search-change="searchChange"><template slot-scope="scope" slot="sexSearch"><el-tag>自定義搜索內(nèi)容</el-tag></template><template slot="searchMenu"><el-button size="small">自定義按鈕</el-button></template> </avue-crud> <script> export default {data(){return {data:[{name:'張三',sex:18,}],option:{column: [{label: '姓名',prop: 'name',search:true,},{label: '年齡',prop: 'sex',searchslot:true,search:true,}]}}},methods:{searchChange(params,done) {done();this.$message.success(JSON.stringify(params))},} } </script>

?

子定義操作按鈕
js自動配置crud
{
??border:?true,//表格是否顯示邊框
??index:?true,///表格是否顯示序號
??selection:?true,//表格是否顯示可選select
??dic:['GRADE','SEX'],//傳入需要獲取字典的變量，看vuex中的getDic方法
??column:?[
????{
??????label:?"用戶名",//表格的標(biāo)題
??????prop:?"username",//表格的key
??????width:?"150",//表格的寬度
??????fixed:?true,//是否凍結(jié)列
??????hide:true,//是否隱藏
??????type:'select',?//select?|?radio?|?checkbox?|?date?默認(rèn)為text
??????visdiplay:true,//表單不顯示
??????overHidden:?true,//超出省略號顯示
??????dicData:?'GRADE',?//傳入需要引用的字典
??????],//type的數(shù)據(jù)字典,當(dāng)type為：select?|?radio?|?checkbox?加載
??????dataDetail:?val?=>?{
????????return?``;;//是否對列表數(shù)據(jù)處理
??????},
??????rules:?[{?required:?true,?message:?"請輸入用戶名",?trigger:?"blur"?}]?//表單校驗(yàn)規(guī)則
????}
}
?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

總結(jié)

以上是生活随笔為你收集整理的使用Avue的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。