vue分页和表单实现

Vue 分页实现

基础分页组件 创建一个可复用的分页组件，接收总页数、当前页等参数，通过事件触发页码变化：

<template>
  <div class="pagination">
    <button 
      @click="changePage(currentPage - 1)" 
      :disabled="currentPage === 1"
    >上一页</button>

    <span 
      v-for="page in displayedPages" 
      :key="page"
      @click="changePage(page)"
      :class="{ active: page === currentPage }"
    >{{ page }}</span>

    <button 
      @click="changePage(currentPage + 1)" 
      :disabled="currentPage === totalPages"
    >下一页</button>
  </div>
</template>

<script>
export default {
  props: {
    totalItems: Number,
    itemsPerPage: Number,
    currentPage: Number
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage)
    },
    displayedPages() {
      const range = [];
      const start = Math.max(1, this.currentPage - 2);
      const end = Math.min(this.totalPages, start + 4);
      for (let i = start; i <= end; i++) {
        range.push(i);
      }
      return range;
    }
  },
  methods: {
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.$emit('page-changed', page);
      }
    }
  }
}
</script>

结合API请求 在父组件中处理分页逻辑，通常与axios请求配合：

export default {
  data() {
    return {
      items: [],
      currentPage: 1,
      totalItems: 0,
      itemsPerPage: 10
    }
  },
  methods: {
    fetchData() {
      axios.get('/api/items', {
        params: {
          page: this.currentPage,
          per_page: this.itemsPerPage
        }
      }).then(response => {
        this.items = response.data.data;
        this.totalItems = response.data.total;
      })
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchData();
    }
  },
  created() {
    this.fetchData();
  }
}

Vue 表单实现

基础表单结构 使用v-model实现双向数据绑定，配合表单验证：

<template>
  <form @submit.prevent="handleSubmit">
    <div class="form-group">
      <label>用户名</label>
      <input 
        type="text" 
        v-model="form.username"
        @blur="validate('username')"
      >
      <span class="error" v-if="errors.username">{{ errors.username }}</span>
    </div>

    <div class="form-group">
      <label>密码</label>
      <input 
        type="password" 
        v-model="form.password"
        @blur="validate('password')"
      >
      <span class="error" v-if="errors.password">{{ errors.password }}</span>
    </div>

    <button type="submit" :disabled="isSubmitting">提交</button>
  </form>
</template>

表单逻辑处理 实现数据验证和提交逻辑：

export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      errors: {
        username: '',
        password: ''
      },
      isSubmitting: false,
      validationRules: {
        username: val => val.length >= 3 || '用户名至少3个字符',
        password: val => val.length >= 6 || '密码至少6个字符'
      }
    }
  },
  methods: {
    validate(field) {
      this.errors[field] = this.validationRules[field](this.form[field]) || '';
    },
    handleSubmit() {
      Object.keys(this.form).forEach(field => this.validate(field));
      if (Object.values(this.errors).some(err => err)) return;

      this.isSubmitting = true;
      axios.post('/api/submit', this.form)
        .then(() => {
          alert('提交成功');
        })
        .finally(() => {
          this.isSubmitting = false;
        });
    }
  }
}

表单验证库推荐 对于复杂表单，可以使用专业验证库：

• VeeValidate：提供声明式验证规则
• Vuelidate：基于模型的验证方案
• Element UI/ANTDV等UI库内置的表单验证

分页与表单结合示例

常见场景如带搜索条件的分页表格：

export default {
  data() {
    return {
      searchForm: {
        keyword: '',
        status: ''
      },
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    fetchData() {
      const params = {
        ...this.searchForm,
        page: this.pagination.currentPage,
        size: this.pagination.pageSize
      };

      axios.get('/api/data', { params })
        .then(res => {
          this.tableData = res.data.list;
          this.pagination.total = res.data.total;
        });
    },
    handleSearch() {
      this.pagination.currentPage = 1;
      this.fetchData();
    },
    handlePageChange(page) {
      this.pagination.currentPage = page;
      this.fetchData();
    }
  },
  created() {
    this.fetchData();
  }
}