VUE-Element学习使用笔记

Vue-Element前端ui框架在使用时遇到的问题

1、form表单翻页问题解决方案

• 加个ref=""用来获取监听翻页ref="resetPageNo"

<bottom-tool-bar>
        <div slot="page">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="15"
            layout="total, prev, pager, next"
            //加个ref=""用来获取监听翻页
            ref="resetPageNo"
            :total="total">
          </el-pagination>
        </div>
</bottom-tool-bar>

• 在获取数据中加一行代码

this.$refs.resetPageNo.internalCurrentPage = page.pageNo;

//获取数据
    get_table_data() {
      this.load_data = true;
      this.$fetch.api_diet
        .list(this.form)
        .then(data => {
          var page = data.data;
          this.table_data = page.result;
          //this.currentPage = page;
          this.form.pageNo = page.pageNo;
          this.total = page.totalCount;
          //在获取数据中加一行代码
          this.$refs.resetPageNo.internalCurrentPage = page.pageNo;
          this.load_data = false;
        })
        .catch(() => {
          this.load_data = false;
       });
    },

2、表单校验

​ form表单

<-- :rules="rules"为表单校验必加项,用作下面的绑定 -->
<el-form ref="form" :model="form" :rules="rules" label-width="120px" :inline="true" class="demo-form-inline">
<el-form-item label="手机" prop="mobile">
    <-- oninput="value=value.replace(/[^\d]/g,'')" 用来限制只能输入数字无法输入其他 -->
   <el-input oninput="value=value.replace(/[^\d]/g,'')" v-model="form.mobile" auto-complete="off" style="width:230px;"></el-input>
   </el-form-item>
</el-form>

​ js部分

export default {
    data() {
        //定义一个规则
      var valMobile = (rule, value, callback) => {
        if (!(/^1[3|4|5|7|8][0-9]\d{8}$/.test(value))) {
          callback(new Error("请输入正确的手机号"));
        } else {
          callback();
        }
      };
        form: {
          mobile: "",//手机
        },
         //和表单中的rules绑定
        rules: {
          mobile: [{required: true, message: '手机不能为空', trigger: 'blur'},
                   //和var validator绑定
                   {validator: valMobile, trigger: 'blur'}],
        }
     }
   }

Q.E.D.