关于vue2 element ui 和路由的使用

在使用这个Vue2 路由 element ui选择按需映入的练习的时候 发现了这个element ui 好像有的地方有问题
1：Form 组件表单验证问题

<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="ruleForm.name">el-input>
    el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')"
        >立即创建
      <el-button @click="resetForm('ruleForm')">重置el-button>
    el-form-item>
  el-form>
template>

export default {
  data() {
    return {
      ruleForm: {
        name: "",
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};

问题1：提供了表单验证的功能部分，这个部分不就是三个要点吗 ？ 第一，给整个form 动态绑定数据 ：model="Form",第二，绑定:rules="rules 验证规则 第三，通过这个props属性指定验证规则 但是这三部分照着官网的cv 最后失去焦点后并没有触发提示
问题2： 通过给这个 form 绑定 ref 属性获取这个 form组件 然后通过 这个 validate事件和这个resetForm事件简单的进行表单验证事件 好像也没有触发
问题3：label="活动名称 这个label属性也没显示

2：分页 组件不能正常分页

      @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="userListMess.pagenum"
        :page-sizes="[1, 2, 3, 4, 5, 6]"
        :page-size.sync="userListMess.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="UserList.length"
      >
      

 // 每一页的可容纳数据项
  data() {
    return {
      userListMess: {
        query: "",
        // 当前页码
        pagenum: 2,
        // 每页可容纳数据
        pagesize: 3,
      },
      UserList: [],
}
}
methods:{
// 每一页的可容纳数据项
    handleSizeChange(newSize) {
      console.log("每页" + newSize + "数据");
      // 设置每页的数据项
      this.userListMess.pagesize = newSize;
      this.getUserList();
    },
    // 页面页码发生变化
    handleCurrentChange(NewPage) {
      console.log(NewPage + "页");
      this.userListMess.pagenum = NewPage;
      console.log("@", this.userListMess.pagenum);
      this.getUserList();
    },
}

问题1：我自己写了一个简单的服务器 接收了userListMess.pagenum 的值 和 :page-size.sync="userListMess.pagesize" 通过这个size-change函数可以改变这个table页面的显示数据的数量 但是这个好像也存在问题 问题如下

问题出现在 问什么这个page-size 变化时 这个页面没有限制数据的数量

分页那个问题 其实element 分页组件和表格组件是2个组件 互相是没有关系的 你表格里有6条数据就要展示6条 而分页根据你总数6条展示的也没问题 要想联系起来 一般做法是 在请求时加2个参数 页数和每页条数 然后接口根据你的参数在查询数据时加limit 然后返回 另外接口还需要返回你请求的所有数据的总数 这样你得到的数据就是你要求表格要展示的条数 分页也可以根据接口返回的总数来展示

表单问题 你只绑了规则 但是没有定义规则 你看一下 应该报错了 rules没定义

希望大佬能解决小白的问题

rules规则验证定义了吗，检查是否有重名，检查表格data是否有绑定