Vue+ElementUI前端实现分页和模糊查询

苏格拉没有底_coder

已于 2024-04-11 01:17:37 修改

阅读量3.5k

点赞数 3

分类专栏：技术杂记文章标签： vue.js 前端 elementui

于 2022-07-06 15:18:38 首次发布

本文链接：https://blog.youkuaiyun.com/m0_47352999/article/details/125639255

版权

技术杂记专栏收录该内容

13 篇文章

订阅专栏

博客介绍了Vue项目部分代码，包括变量定义，如tableData用于表格展示数据，tempDate保存后台请求数据；还讲解了computed和watch方法，watch可关联视图数据与函数，数据变化时执行关联函数；介绍了向后台请求数据的方法及表格绑定经过计算分页后的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.变量的定义：

tableData：该变量用来向表格中展示数据。

tempDate：该变量用来保存在后台请求过来的所有数据，便于模糊查询时进行匹配。

  data() {
    return {
      tableData: [],
      tempDate: [],
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页显示的行数
      totals: 0,
      name: "",
      movie: {
        id: "",
        name: "",
        director: "",
        screenwriter: "",
        performer: "",
        form: "",
        country: "",
        language: "",
        releaseDate: "",
        filmlength: "",
        info: "",
        type: "",
        logo: "",
        video: "",
      },
      select: "",
    };

2.computed和watch方法

watch本身很容易理解, watch负责将视图中的数据与某个函数关联起来。当Vue视图中的数据变化时, 关联的函数会被执行。

watch可以监听data里面值的变化。当input输入框中的值发生变化的时候，与其关联的函数便会执行。

<el-input v-model="select" placeholder="请输入筛选关键词" />

computed: {
    // 计算当前表格中的数据，用于分页。
    data() {
      //slice方法通过索引位置获取并返回一个新的子数组。
      //用法：arrayObj.slice(start,end)，其中，arrayObj 为原数组，
      //start设定新数组的起始位置，end设定新数组的结束位置。
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  watch: {
    select: function () {
      // 如果输入框的值为空的话，便会执行
      if (this.select === "") {
        this.tableData = this.tempData; // tempData中存储的是后台请求来的所有信息
      } else {
        // 如果不为空的话
        this.tableData = [];
        for (let item of this.tempData) { // 对tempData中的所有信息进行遍历
          if (
            item.name.includes(this.select) ||
            item.author.includes(this.select)
          ) {
            // 如果tempData中的某一条目中的某个属性包含输入框中的内容时，
            // 就将这个条目放入tableData中，因为tableData中保存的是用来向表格中展示的数据
            this.tableData.push(item);
          }
        }
      }
    },
  },

3.向后台请求数据的方法，写在methods里面

queryAllMovies() {
    this.tempData = [];
    this.tableData = [];
    this.$http.post("***/****(自己的后台接口)", {}).then((resp) => {
      this.tableData = resp.data;
      this.tempData = resp.data;
    });
  },

4.表格table

该表格绑定的是data，该绑定的数据为computed中的data，是经过计算分页之后的数据。

<el-table :stripe="true" border :data="data" style="width: 100%;height:550px">
    <el-table-column type="selection" width="50" />
    <el-table-column type="index" :index="calcIdx" width="80" />
    <el-table-column prop="name" label="电影名" width="180" />
    <el-table-column prop="name" label="图片" width="65">
        <template slot-scope="scope">
            <img :src="scope.row.logo" style="height:60px;">
        </template>
    </el-table-column>
    <el-table-column prop="director" label="导演" width="180" />
    <el-table-column prop="screenwriter" label="编剧" width="180" />
    <el-table-column prop="performer" label="主演" width="240" />
    <el-table-column prop="form" label="类型" width="100" />
    <el-table-column prop="country" label="制片国家/地区" width="180" />
    <el-table-column prop="language" label="语言" width="180" />
    <el-table-column prop="releaseDate" label="上映日期" width="180" />
    <el-table-column prop="filmlength" label="片长" width="140" />
    <el-table-column prop="score" label="评分" width="120" />
    <el-table-column prop="type" label="影视种类" width="120">
    </el-table-column>
    <el-table-column label="内容简介" width="120">
        <template slot-scope="scope">
            <el-button type="text" @click="openContentInfo(scope.row.info)">查看详情</el-button>
        </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="160">
        <template slot-scope="scope">
            <el-button type="text" @click="Update(scope.row)">修改</el-button>
            <el-button type="text" style="margin-left: 30px" @click="DeleteYes(scope.row.id)">删除</el-button>
        </template>
    </el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
    :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total,  prev, pager, next, jumper"
    :total="tableData.length">
</el-pagination>

注：展示的为项目的部分代码。

最后实现的效果展示：