初学vue 在做项目时遇到的问题与解决办法（使用element组件）（二）

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

  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属性值

  10. element 表头单击事件
    　使用element.ui之后 @click="" 无法对表头等元素添加点击事件，应该是@click.native=""

以上是 初学vue 在做项目时遇到的问题与解决办法（使用element组件）（二） 的全部内容， 来源链接： utcz.com/z/376288.html

回到顶部