vue.js2.0+elementui ——> 后台管理系統


前言:

因為觀察到vue.js的輕量以及實時更新數據的便捷性,於是新項目便決定使用vue.js2.0以及與之配套的elementui來完成。只是初次接觸新框架,再使用過程中,遇見了各種各樣“奇葩”的問題,在所有人的努力下,幸好該項目已接近尾聲,就此便小談一下自己的收獲吧!

過程:

【使用到的文檔】

https://cn.vuejs.org/v2/guide/syntax.html(vuejs)

http://element.eleme.io/#/zh-CN(elementui)

http://lodashjs.com/docs/(lodash.js:主要用於處理與數組相關的問題)

【遇見的問題集結】

.1111

1.select選擇器賦不上值

問題描述:點擊select下拉框,能選到下拉框中的數據,但是卻選不上值,即回顯不上選擇到的數據。

解決方法:原來是版本問題。只需將elementui升級到1.3.0即可。(歷史遺留問題吧~)

22

2.將后台服務器返回的數據綁定在前台頁面上

問題描述:現存在一個下拉框,但是下拉框的數據是通過后台的一個方法查詢得來並返回給前台,問題就是應該怎樣將數據綁定在該下拉框中呢?

解決方法:使用mouted方法,將后台獲得的數據綁定在該select的model中即可,例如

3

...
mounted() {
            this.$nextTick(() => { //更新所選組別下拉框數據
                apiclient.usergroup_getugname().then(res =>{  //用戶組別下拉框數據
                    this.filters.s_gid = res;
                });
            });
            this.search();
        }
...

其中:apiclient.usergroup_getugname()為后台獲取用戶組別下的所有符合條件的數據,this.filters.s_gid為該下拉框的v-model數據。

3.select的校驗不通過

問題描述:選好下拉框,並且賦好值,但是需要進行非空校驗,於是使用官網上的校驗方式(如下),卻總是報錯:“xxx is not a string”

...
 rules: {
          name: [//校驗input框
            { required: true, message: '請輸入活動名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
          ],
          region: [//校驗select選擇器
            { required: true, message: '請選擇活動區域', trigger: 'change' }
          ],
        ...
}
...

於是,在將整個select下拉框的值寫成固定的,再使用上面的校驗方法的時候,居然不報錯了。最終更是不知道應該從何下手解決……直到看到這個:

33

https://github.com/yiminghe/async-validator(適合校驗的文檔)

在這里面,有着詳細的介紹,還有一些我們未曾發現的“小秘密”,這樣問題便迎刃而解

...
 rules: {
          name: [//校驗input框
            { required: true, message: '請輸入活動名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
          ],
          region: [//校驗select選擇器
            { required: true,type:'number', message: '請選擇活動區域', trigger: 'change' }
          ],
        ...
}
...

看文檔,一定要認真點,仔細點!

后言:

沒入手vue.js+elementui之前,總覺得這個有點難,只是因為自己不太熟悉;而當自己憑借喜歡以及工作需要慢慢了解它后,才發現原來並不難,而只是自己給它附上了一層“神秘”的面紗而已。其實在這個項目中遇見的問題還很多,后續繼續總結。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM