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:主要用於處理與數組相關的問題）

【遇見的問題集結】

.

1.select選擇器賦不上值

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

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

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

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

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

...
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下拉框的值寫成固定的，再使用上面的校驗方法的時候，居然不報錯了。最終更是不知道應該從何下手解決……直到看到這個：

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之前，總覺得這個有點難，只是因為自己不太熟悉；而當自己憑借喜歡以及工作需要慢慢了解它后，才發現原來並不難，而只是自己給它附上了一層“神秘”的面紗而已。其實在這個項目中遇見的問題還很多，后續繼續總結。