vue分页和表单实现

Vue 分页实现

安装依赖（如使用第三方库） 若采用 element-ui 或 ant-design-vue 等 UI 库，需先安装对应的分页组件包。例如：

npm install element-ui

基础分页组件 通过 v-model 绑定当前页码，监听 current-change 事件：

<template>
  <el-pagination
    v-model:current-page="currentPage"
    :page-size="pageSize"
    :total="total"
    @current-change="handlePageChange"
  />
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100
    };
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchData();
    },
    fetchData() {
      // 模拟 API 请求
      console.log(`Fetching page ${this.currentPage}`);
    }
  }
};
</script>

自定义分页逻辑 若不依赖 UI 库，可通过计算属性实现分页数据切片：

<template>
  <div>
    <div v-for="item in paginatedData" :key="item.id">{{ item.name }}</div>
    <button @click="prevPage">上一页</button>
    <span>当前页: {{ currentPage }}</span>
    <button @click="nextPage">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [...], // 原始数据
      currentPage: 1,
      pageSize: 5
    };
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.dataList.slice(start, end);
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) this.currentPage--;
    },
    nextPage() {
      if (this.currentPage < Math.ceil(this.dataList.length / this.pageSize)) {
        this.currentPage++;
      }
    }
  }
};
</script>

Vue 表单实现

基础表单绑定 使用 v-model 实现双向数据绑定：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.name" placeholder="姓名" />
    <input v-model="form.email" type="email" placeholder="邮箱" />
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    handleSubmit() {
      console.log('提交数据:', this.form);
    }
  }
};
</script>

表单验证 结合 vee-validate 或自定义验证逻辑：

<template>
  <form @submit.prevent="handleSubmit">
    <input 
      v-model="form.name" 
      @blur="validateName"
      placeholder="姓名" 
    />
    <span v-if="errors.name">{{ errors.name }}</span>

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

<script>
export default {
  data() {
    return {
      form: { name: '' },
      errors: { name: '' },
      isValid: false
    };
  },
  methods: {
    validateName() {
      this.errors.name = this.form.name ? '' : '姓名不能为空';
      this.isValid = !this.errors.name;
    },
    handleSubmit() {
      if (this.isValid) {
        console.log('验证通过:', this.form);
      }
    }
  }
};
</script>

动态表单字段 通过 v-for 渲染动态表单项：

<template>
  <form @submit.prevent="handleSubmit">
    <div v-for="(field, index) in form.fields" :key="index">
      <input v-model="field.value" :placeholder="field.label" />
    </div>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        fields: [
          { label: '用户名', value: '' },
          { label: '密码', value: '', type: 'password' }
        ]
      }
    };
  },
  methods: {
    handleSubmit() {
      const payload = this.form.fields.reduce((acc, field) => {
        acc[field.label] = field.value;
        return acc;
      }, {});
      console.log('提交数据:', payload);
    }
  }
};
</script>

结合分页与表单的示例

在分页表格中编辑表单数据：

<template>
  <el-table :data="paginatedData">
    <el-table-column prop="name" label="姓名">
      <template #default="{ row }">
        <input v-model="row.name" />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <button @click="saveRow(row)">保存</button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    v-model:current-page="currentPage"
    :total="total"
    @current-change="fetchData"
  />
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      total: 50,
      tableData: []
    };
  },
  computed: {
    paginatedData() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    }
  },
  methods: {
    fetchData() {
      // 模拟 API 获取数据
      this.tableData = Array.from({ length: 50 }, (_, i) => ({
        id: i,
        name: `用户${i}`
      }));
    },
    saveRow(row) {
      console.log('保存行数据:', row);
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>