vue 表格分页加搜索

在 Vue 中使用表格组件进行分页和搜索的步骤如下：

1. 安装表格组件

使用 npm 或 yarn 安装表格组件，例如 element-ui 或者 vuetify 等。

2. 引入表格组件

在需要使用表格的页面中引入表格组件，并注册到 Vue 实例中。

3. 定义表格数据及列

在 data 中定义表格数据及列信息，例如：

data() {
  return {
    tableData: [
      { name: 'John', age: 23, gender: 'Male' },
      { name: 'Jane', age: 32, gender: 'Female' },
      { name: 'Bob', age: 45, gender: 'Male' },
      { name: 'Alice', age: 28, gender: 'Female' }
    ],
    tableColumns: [
      { prop: 'name', label: 'Name' },
      { prop: 'age', label: 'Age' },
      { prop: 'gender', label: 'Gender' }
    ]
  }
}

其中 tableData 为表格数据，tableColumns 为表格列信息。

4. 添加分页组件

根据使用的表格组件不同，添加对应的分页组件。例如在使用 element-ui 的情况下，可以使用 el-pagination 组件。

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

其中 currentPage 为当前页码，pageSize 为每页显示条数，total 为总条数，handleCurrentChange 为页码改变时的回调函数。

5. 添加搜索组件

根据需要添加搜索组件，例如在使用 element-ui 的情况下，可以使用 el-input 组件。

<el-input v-model="searchText" placeholder="Search"></el-input>

其中 searchText 为搜索关键字。

6. 实现分页和搜索

在 methods 中实现分页和搜索的逻辑。例如：

methods: {
  handleCurrentChange(currentPage) {
    this.currentPage = currentPage;
    // 根据当前页码重新获取数据
    // ...
  },
  handleSearch() {
    // 根据关键字搜索数据
    // ...
  }
}

在 handleCurrentChange 方法中，根据当前页码重新获取数据。在 handleSearch 方法中，根据关键字搜索数据，并更新表格数据。

完整的代码示例：

<template>
  <div>
    <el-input v-model="searchText" placeholder="Search" @keyup.enter="handleSearch"></el-input>
    <el-table :data="tableData" :columns="tableColumns">
      <el-pagination
        v-model="currentPage"
        :page-size="pageSize"
        :total="total"
        @current-change="handleCurrentChange">
      </el-pagination>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      currentPage: 1,
      pageSize: 2,
      total: 4,
      tableData: [
        { name: 'John', age: 23, gender: 'Male' },
        { name: 'Jane', age: 32, gender: 'Female' },
        { name: 'Bob', age: 45, gender: 'Male' },
        { name: 'Alice', age: 28, gender: 'Female' }
      ],
      tableColumns: [
        { prop: 'name', label: 'Name' },
        { prop: 'age', label: 'Age' },
        { prop: 'gender', label: 'Gender' }
      ]
    }
  },
  methods: {
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      // 根据当前页码重新获取数据
      // ...
    },
    handleSearch() {
      // 根据关键字搜索数据
      // ...
    }
  }
}
</script>