初學vue 在做項目時遇到的問題與解決辦法（使用element組件）（二）

1. 表格每行里都有按鈕

   <el-table-column prop="option" label="操作" align="center" >
        <template slot-scope="scope">
            <el-button size="mini" plain @click="del(scope.$index,scope.row)">刪除</el-button>
             <el-button size="mini" plain @click="[edit(scope.$index,scope.row),editVisible =true]">修改</el-button>
         </template>
   </el-table-column>

   單擊刪除按鈕時獲取本行的id： del(index, row) { alert(row.id) } 

2. element 的表單一行顯示多個標簽

   1). :inline="true"

    <el-form :inline="true" :model="seach" :label-width="labelwidth"> 

   2).  使用el-row el-col去分割

   <el-form  :model="ruleForm" >
       <el-row type="flex" class="row-bg">
          <el-col :span="12">
             <el-form-item label="簽約企業名稱" prop="ep_name">
                 <el-input style="width:16em" v-model="ruleForm.ep_name"></el-input>
              </el-form-item>
           </el-col>
              <el-form-item label="簽約企業簡稱" prop="ep_abbreviation">
                   <el-input style="width:16em" v-model="ruleForm.ep_abbreviation"></el-input>
               </el-form-item>
        </el-row>
   </el-form>

3. 表單驗證規則

   查看文檔：https://blog.csdn.net/weixin_42018790/article/details/80762149

   1). el-form增加 :rules="rules"

   2).  el-form-item 中的label增加屬性 prop="名稱"

   3).  data中定義rules:{}

   例子：

   <el-form ref="form" :rules="rules" :model="form" label-width="300px">
     <el-form-item label="發貨人電話" prop="phone">
       <el-input class="inp" v-model="form.phone"></el-input>
       </el-form-item>
     <el-form-item label="發貨地址：" prop="address">
       <el-input class="inp" v-model="form.address" ></el-input>
       <el-button type="primary"@click="onSubmit('form')">常用地址</el-button>
      </el-form-item>
    </el-form>

   <script>
   export default {
     data() {
    // 此處自定義校驗手機號碼js邏輯
       var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
       var validatePhone = (rule, value, callback) => {
         if (!value) {
           return callback(new Error('號碼不能為空!!'))
         }
         setTimeout(() => {
           if (!phoneReg.test(value)) {
             callback(new Error('格式有誤'))
           } else {
             callback()
           }
         }, 1000)
   }
   },
       return {
         form: {
           phone:'',
           address: '',
         },
         // 校驗規則
         rules: {
    // 校驗手機號碼，主要通過validator來指定驗證器名稱
           phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
           address: [
           { required: true, //是否必填
             message: '地址不能為空', //規則
             trigger: 'blur'  //何事件觸發
           },
           //可以設置雙重驗證標准
           { min: 3, max: 5,  message: '長度在 3 到 5 個字符', }
         ]
         }
       }
     }
   
   </script>

4. 計算屬性，依賴發生變化時，重新計算computed：

   <el-form-item label="單價："  prop="price" >
          <el-input v-model="addform.price" type="number" placeholder="請輸入單價" auto-complete="off" class="widc" ></el-input>
    </el-form-item>
   <el-form-item label="數量："  prop="number" >
          <el-input v-model="addform.number" type="number" placeholder="請輸入數量" auto-complete="off" class="widc" ></el-input>
   </el-form-item>
   <el-form-item label="總金額："  prop="sum" >
          <div v-model="addform.countNum" class="border" ><span style="margin-left: 10%">{{countNum}}</span></div>
   </el-form-item>

   // 計算總金額
       computed:{
         countNum:function(addform){
           let countNum=Number(this.addform.price) * Number(this.addform.number)
           return countNum
         }
       },

5. 將內容滾動到指定坐標

    window.scrollTo(xpos,ypos);

6. element ui組件的開始時間-結束時間驗證

   <el-date-picker  v-model="seach.before" type="date" placeholder="開始時間"  value-format="yyyy-MM-dd" class="wida" :picker-options="pickerBeginDateBefore"  @change="changeTime">
   </el-date-picker>
       <span class="zhi">至</span>
   <el-date-picker   v-model="seach.after" type="date" placeholder="結束時間"value-format="yyyy-MM-dd" class="wida" :picker-options="pickerBeginDateAfter">
   </el-date-picker>

   seach:{
     before:'',
     after:'',
   },
     // 開始時間不大於結束時間
           // 開始時間
           pickerBeginDateBefore: {
             disabledDate: (time) => {
               let beginDateVal = this.seach.after;
               if (beginDateVal) {
                 return time.getTime() > beginDateVal;
               }
             }
           },
           // 結束時間
           pickerBeginDateAfter: {
             disabledDate: (time) => {
               let beginDateVal = this.seach.before;
               if (beginDateVal) {
                 return time.getTime() < beginDateVal;
               }
             }
           },

   //選擇開始時間，清空結束時間
         changeTime(date){
           // this.seach.before="";
           // console.log(this.seach.before)
           this.pickerBeginDateAfter={
             disabledDate(time) {  //開始時間-結束時間
               return (time.getTime() < new Date(date).getTime());
             }
           }
         },

    

7. element表格不設置行寬的時候會自適應顯示

8. 頁面一加載的時候執行方法要在created中調用：

   created:function(){
         this.getTableData();/*調用的方法*/
   },

9. v-if 和v-show區別：

   通俗說：用法一樣，意思不一樣

   v-if就是動態添加/刪除，是真時的渲染，為true時才編譯

   v-show就是顯示/隱藏，剛開始的時候就編譯了，只是被保留下來，改變了css的display屬性值

10. element 表頭單擊事件
    　使用element.ui之后 @click="" 無法對表頭等元素添加點擊事件，應該是@click.native=""