使用ElementUI实现前端分页查询、模糊查询、精确查询、查询结果跳转至第一页

2023-09-27 04:46:05

实现步骤

安装ElementUI库

npm install element-ui

在您的Vue.js项目中导入ElementUI库

import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)

创建一个Vue组件来实现分页查询功能

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="name"
        label="Name"
      >
      </el-table-column>
      <el-table-column
        prop="age"
        label="Age"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="Address"
      >
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    fetchData() {
      // 这里假设有一个名为fetchData的API，可以获取数据
      fetchData(this.currentPage, this.pageSize).then(res => {
        this.tableData = res.data
      })
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>

在您的Vue.js项目中使用该组件

<template>
  <div>
    <my-pagination></my-pagination>
  </div>
</template>

<script>
import MyPagination from './components/MyPagination.vue'

export default {
  components: {
    MyPagination
  }
}
</script>

实现模糊查询、精确查询和查询结果跳转至第一页

修改Vue组件中的fetchData方法

fetchData() {
  // 这里假设有一个名为fetchData的API，可以获取数据
  fetchData(this.currentPage, this.pageSize, this.searchValue, this.searchType).then(res => {
    this.tableData = res.data
  })
}

在Vue组件中添加搜索框和搜索按钮

<template>
  <div>
    <el-input v-model="searchValue" placeholder="Search"></el-input>
    <el-button type="primary" @click="handleSearch">Search</el-button>

    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="name"
        label="Name"
      >
      </el-table-column>
      <el-table-column
        prop="age"
        label="Age"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="Address"
      >
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      searchValue: '',
      searchType: '模糊查询' // 精确查询或模糊查询
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    handleSearch() {
      this.currentPage = 1 // 搜索后跳转至第一页
      this.fetchData()
    },
    fetchData() {
      // 这里假设有一个名为fetchData的API，可以获取数据
      fetchData(this.currentPage, this.pageSize, this.searchValue, this.searchType).then(res => {
        this.tableData = res.data
      })
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>