vue+elementUI專案的踩坑~~持續更新

汪小蓉發表於2018-05-22

VueUI

日常工作記錄，如果對你有幫助請點亮小~心~心喔~~~ 接受禮貌的批評指導

1、el-form只有一個搜尋條件時頁面重新整理問題；

2、el-tree樹形控制元件，給專案安裝jsx語法；

3、el-cascader（foreach和箭頭函式）獲得選項更多資訊；

4、Vue實現對陣列、物件的深拷貝、複製

5、input關於金額輸入限制（正規表示式~）

6、子元素設定margin-top，父元素被影響了~

7、導航類目效果（動態class+v-if顯示隱藏）

8、列表多張圖片上傳（el-upload+箭頭函式）

一、el-form自動重新整理頁面

程式碼：

 <el-form :inline="true"  size="small" ref="form">
            <el-form-item label="姓名">
              <el-input v-model="name" size="small" @keyup.native.13="search" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="danger" @click="search">搜尋</el-button>
            </el-form-item>
 </el-form>
複製程式碼

問題：

輸入框寫完，Enter一下。/admin/Index/permissions/administer?。網址就跑出來一個問號，自動重新整理頁面；

解決方案：

姓名 <el-input v-model="name" style="width:150px;" size="small" 
     @keyup.native.13="search" clearable>
     </el-input>
    <el-button type="danger" size="small"  @click="search">搜尋</el-button>
複製程式碼

原因：

赤裸裸打臉。。。啪啪響

連結：element.eleme.io/#/zh-CN/com…

溫馨提示：給輸入框新增Enter鍵進行搜尋，一次性補完的感覺那叫一個酸爽呀

二、 tree 樹形控制元件時需要動態新增DOM元素

問題：

其中 renderContent 函式中返回的內容會報錯；

原來是缺少相應的依賴，因為 renderContent 方法用到了jsx語法，所以需要要引入babel的JSX解析器，把JSX轉化成JS語法，這個工作會由babel自動完成。

辦法：

(指令框)

 npm install\
  babel-plugin-syntax-jsx\
  babel-plugin-transform-vue-jsx\
  babel-helper-vue-jsx-merge-props\
  babel-preset-env\
  --save-dev
複製程式碼

(.babelrc檔案）

{
  "presets": ["env"],
  "plugins": ["transform-vue-jsx"]
}

複製程式碼

三、el-cascader（foreach和箭頭函式）

問題：

  <el-cascader expand-trigger="hover"  placeholder="請下拉選擇"
                         :show-all-levels="true" :options="chuli" :props="defaultProps" v-model="postMsg.chooseid"
                         @change="test">
  </el-cascader>
複製程式碼

假如選定了羊毛毛衣，因為defaultProps配置的值value是陣列中的id,只能獲得資料id組[1,22,33]，但是還需要名稱組[服裝，毛衣，羊毛毛衣]；

   data(){
            return {
              chuli:[],
              defaultProps: {
                label: 'name',
                children:'list',
                value:'id'
              },
              postMsg:{
                  choosename:[],
                  chooseid:[],
                   catetype:[],
              },
         }
     }
複製程式碼

chuli:後臺返回的資料；

解決：（使用foreach和箭頭函式，通過得到的id組去得到name組）

呼叫@change資料變化的方法：


   test:function(value){
            let names=[];
           let type=[];
            value.forEach(o=>{
                findName(this.chuli,o,names,type);
            });
            this.postMsg.choosename=names;
            this.postMsg.chooseid=value;
            this.postMsg.catetype=type;
   },

複製程式碼

//    通過id遍歷名字
    function findName(list,value,names,type) {
        if(list!=undefined){
          for(let i=0;i<list.length;i++){
            if(list[i].id===value){
              names.push(list[i].name);
              type.push(list[i].catetype);
              return;
            }else{
              findName(list[i].list,value,names,type);
            }
          }
        }
    }
複製程式碼

四、Vue實現對陣列、物件的深拷貝、複製

問題：

//對於陣列
 var a = [1,2,3];
 var b = a;
 b.push(4); // b中新增了一個4
 alert(a); // a變成了[1,2,3,4]
複製程式碼

//對於物件
var obj = {a:1};
var obj2 = obj;
obj2.a = 2; // obj2.a改變了，
alert(obj.a); // 2，obj的a跟著改變
複製程式碼

原因：

當元件間傳遞物件時，由於此物件的引用型別指向的都是一個地址；除了基本型別和null其他的“=”賦值都等同於是賦予地址，實際上都是同一個地址，修改值均會改變。

五、input關於金額輸入限制（正規表示式~）

詳情程式碼：

<input type="text" v-model="payMoney" @keyup="amount"/>
 amount(){
    let regStrs = [
      ['^(\\d+\\.\\d{2}).+', '$1'], //禁止錄入小數點後兩位以上
      ['\\.(\\d?)\\.+', '.$1'], //禁止錄入兩個以上的點
      ['^0(\\d+)$', '$1'], //禁止錄入整數部分兩位以上，但首位為0
      ['^0(\\d+\\.)', '$1'], //禁止輸入小數，首位新增0
      ['\\-(\\d?)','$1'],//禁止輸入-  負數
      ['^\\.(\\d?)','$1'],//禁止小數點開頭
      ['[^\\d\\.]+$', ''],//禁止錄入任何非數字和點
    ];
    for(let i=0; i<regStrs.length; i++){
      let reg = new RegExp(regStrs[i][0]);
      this.payMoney =this.payMoney.replace(reg, regStrs[i][1]);
    }
  },
複製程式碼

六、子元素設定margin-top，父元素被影響了~

。。。想著第一個子元素，直接margin-top直接距離頂部空出來，結果直接作用到父元素身上了。。。原因解析：

父元素如果沒有上補白(padding-top)和上邊框(border-top)，父元素的上邊距margin會和其第一個子元素的上邊距重疊。

解決辦法：

給父元素設定有效的 border或者padding；

  <div class="AdminLogin">
    <div class="loginBox">
       中間登入框內容
    </div>
  </div>
 .loginBox{
    width: 494px;
    height:500px;
    margin:269px auto 240px auto;
    background-color: #fff;
    box-shadow: 0 11px 24.57px 2.43px rgba(0, 0, 0, 0.42);
    padding:50px 87px 98px 87px;
    text-align: center;
  }
 .AdminLogin{
    width: 100%;
    height: 1080px;
    background: url(../assets/Admin/background.png) no-repeat left 100%; 
    padding-top: 269px;
    /*padding-top: 269px;*/第一種方法
     /*border:1px solid #f2f2f2;*/第二種方法
  }
複製程式碼

七、導航類目效果（動態class+v-if顯示隱藏）

效果演示：

簡介：

主要是一個三級分類資料的處理，左側欄目點選右側展示對應的的分類；懸停有分類展示；涉及到樣式的動態切換，和內容的顯示隱藏；