初学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>

   View Code

   单击删除按钮时获取本行的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>

   View Code
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>

   vue html代码
   

   <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>

   Vue js 代码

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>

   vue html代码
   

   // 计算总金额
       computed:{
         countNum:function(addform){
           let countNum=Number(this.addform.price) * Number(this.addform.number)
           return countNum
         }
       },

   vue JavaScript代码
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>

   template中
   

   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;
               }
             }
           },

   return  中
   

   //选择开始时间，清空结束时间
         changeTime(date){
           // this.seach.before="";
           // console.log(this.seach.before)
           this.pickerBeginDateAfter={
             disabledDate(time) {  //开始时间-结束时间
               return (time.getTime() < new Date(date).getTime());
             }
           }
         },

   methods 中

7. element表格不设置行宽的时候会自适应显示

8. 页面一加载的时候执行方法要在created中调用：

   

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

   View Code
9. v-if 和v-show区别：

   通俗说：用法一样，意思不一样

   v-if就是动态添加/删除，是真时的渲染，为true时才编译

   v-show就是显示/隐藏，刚开始的时候就编译了，只是被保留下来，改变了css的display属性值