使用Element UI实现前端分页，前端搜索，及el-table表格跨页选择数据，切换分页保留分页数据，限制多选数量

赢乐2024-11-22 23:07

文章目录

一、前端分页

在现代Web应用中，数据量庞大，一次性加载所有数据，不仅会增加页面加载时间，还会消耗过多的网络资源和客户端内存。因此，分页技术成为了优化用户体验和提高性能的关键手段之一。

而作为一名前端开发，分页功能我们经常会用到，而且有时候，后端会把数据一次性给我们，需要我们自己处理数据，做前端分页。使用Element UI实现前端分页是一项常见的需求。Element UI提供了一个方便的 Pagination 组件，可以用来实现分页功能。以下是一个简单的示例，展示了如何实现前端分页。

1、模板部分 (<template>)
  • 使用el-table展示当前页的数据。
  • 使用el-pagination组件实现分页控件，绑定相关属性和事件。
html 复制代码 
<el-table :data="currentPageData" style="width: 100%">
      <el-table-column prop="id" label="id" width="180"></el-table-column>
      <el-table-column prop="name" label="Name" width="180"></el-table-column>
      <el-table-column prop="value" label="value"></el-table-column>
</el-table>

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
      style="text-align: right; margin-top: 20px;">
</el-pagination>
2、数据部分 (data)
  • tableData：包含所有数据的数组。
  • currentPage：当前页码。
  • pageSize：每页显示的数据条数。
javascript 复制代码 
data() {
    return {
      tableData: [{ "id": 1, "name": "名字1", "value": 1 }, { "id": 2, "name": "名字2", "value": 2 }, { "id": 3, "name": "名字3", "value": 3 }, { "id": 4, "name": "名字4", "value": 4 }, { "id": 5, "name": "名字5", "value": 5 }, { "id": 6, "name": "名字6", "value": 6 }, { "id": 7, "name": "名字7", "value": 7 }, { "id": 8, "name": "名字8", "value": 8 }, { "id": 9, "name": "名字9", "value": 9 }, { "id": 10, "name": "名字10", "value": 10 }, { "id": 11, "name": "名字11", "value": 11 }, { "id": 12, "name": "名字12", "value": 12 }, { "id": 13, "name": "名字13", "value": 13 }, { "id": 14, "name": "名字14", "value": 14 }, { "id": 15, "name": "名字15", "value": 15 }, { "id": 16, "name": "名字16", "value": 16 }, { "id": 17, "name": "名字17", "value": 17 }, { "id": 18, "name": "名字18", "value": 18 }, { "id": 19, "name": "名字19", "value": 19 }, { "id": 20, "name": "名字20", "value": 20 }, { "id": 21, "name": "名字21", "value": 21 }, { "id": 22, "name": "名字22", "value": 22 }, { "id": 23, "name": "名字23", "value": 23 }, { "id": 24, "name": "名字24", "value": 24 }, { "id": 25, "name": "名字25", "value": 25 }, { "id": 26, "name": "名字26", "value": 26 }, { "id": 27, "name": "名字27", "value": 27 }, { "id": 28, "name": "名字28", "value": 28 }, { "id": 29, "name": "名字29", "value": 29 }, { "id": 30, "name": "名字30", "value": 30 }, { "id": 31, "name": "名字31", "value": 31 }, { "id": 32, "name": "名字32", "value": 32 }, { "id": 33, "name": "名字33", "value": 33 }, { "id": 34, "name": "名字34", "value": 34 }, { "id": 35, "name": "名字35", "value": 35 }, { "id": 36, "name": "名字36", "value": 36 }, { "id": 37, "name": "名字37", "value": 37 }, { "id": 38, "name": "名字38", "value": 38 }, { "id": 39, "name": "名字39", "value": 39 }, { "id": 40, "name": "名字40", "value": 40 }, { "id": 41, "name": "名字41", "value": 41 }, { "id": 42, "name": "名字42", "value": 42 }, { "id": 43, "name": "名字43", "value": 43 }, { "id": 44, "name": "名字44", "value": 44 }, { "id": 45, "name": "名字45", "value": 45 }, { "id": 46, "name": "名字46", "value": 46 }, { "id": 47, "name": "名字47", "value": 47 }, { "id": 48, "name": "名字48", "value": 48 }, { "id": 49, "name": "名字49", "value": 49 }, { "id": 50, "name": "名字50", "value": 50 }, { "id": 51, "name": "名字51", "value": 51 }, { "id": 52, "name": "名字52", "value": 52 }, { "id": 53, "name": "名字53", "value": 53 }, { "id": 54, "name": "名字54", "value": 54 }, { "id": 55, "name": "名字55", "value": 55 }, { "id": 56, "name": "名字56", "value": 56 }, { "id": 57, "name": "名字57", "value": 57 }, { "id": 58, "name": "名字58", "value": 58 }, { "id": 59, "name": "名字59", "value": 59 }, { "id": 60, "name": "名字60", "value": 60 }, { "id": 61, "name": "名字61", "value": 61 }, { "id": 62, "name": "名字62", "value": 62 }, { "id": 63, "name": "名字63", "value": 63 }, { "id": 64, "name": "名字64", "value": 64 }, { "id": 65, "name": "名字65", "value": 65 }, { "id": 66, "name": "名字66", "value": 66 }, { "id": 67, "name": "名字67", "value": 67 }, { "id": 68, "name": "名字68", "value": 68 }, { "id": 69, "name": "名字69", "value": 69 }, { "id": 70, "name": "名字70", "value": 70 }, { "id": 71, "name": "名字71", "value": 71 }, { "id": 72, "name": "名字72", "value": 72 }, { "id": 73, "name": "名字73", "value": 73 }, { "id": 74, "name": "名字74", "value": 74 }, { "id": 75, "name": "名字75", "value": 75 }, { "id": 76, "name": "名字76", "value": 76 }, { "id": 77, "name": "名字77", "value": 77 }, { "id": 78, "name": "名字78", "value": 78 }, { "id": 79, "name": "名字79", "value": 79 }, { "id": 80, "name": "名字80", "value": 80 }, { "id": 81, "name": "名字81", "value": 81 }, { "id": 82, "name": "名字82", "value": 82 }, { "id": 83, "name": "名字83", "value": 83 }, { "id": 84, "name": "名字84", "value": 84 }, { "id": 85, "name": "名字85", "value": 85 }, { "id": 86, "name": "名字86", "value": 86 }, { "id": 87, "name": "名字87", "value": 87 }, { "id": 88, "name": "名字88", "value": 88 }, { "id": 89, "name": "名字89", "value": 89 }, { "id": 90, "name": "名字90", "value": 90 }, { "id": 91, "name": "名字91", "value": 91 }, { "id": 92, "name": "名字92", "value": 92 }, { "id": 93, "name": "名字93", "value": 93 }, { "id": 94, "name": "名字94", "value": 94 }, { "id": 95, "name": "名字95", "value": 95 }, { "id": 96, "name": "名字96", "value": 96 }, { "id": 97, "name": "名字97", "value": 97 }, { "id": 98, "name": "名字98", "value": 98 }, { "id": 99, "name": "名字99", "value": 99 }, { "id": 100, "name": "名字100", "value": 100 }, { "id": 101, "name": "名字101", "value": 101 }, { "id": 102, "name": "名字102", "value": 102 }, { "id": 103, "name": "名字103", "value": 103 }, { "id": 104, "name": "名字104", "value": 104 }, { "id": 105, "name": "名字105", "value": 105 }, { "id": 106, "name": "名字106", "value": 106 }, { "id": 107, "name": "名字107", "value": 107 }, { "id": 108, "name": "名字108", "value": 108 }, { "id": 109, "name": "名字109", "value": 109 }, { "id": 110, "name": "名字110", "value": 110 }, { "id": 111, "name": "名字111", "value": 111 }, { "id": 112, "name": "名字112", "value": 112 }, { "id": 113, "name": "名字113", "value": 113 }, { "id": 114, "name": "名字114", "value": 114 }, { "id": 115, "name": "名字115", "value": 115 }, { "id": 116, "name": "名字116", "value": 116 }, { "id": 117, "name": "名字117", "value": 117 }, { "id": 118, "name": "名字118", "value": 118 }, { "id": 119, "name": "名字119", "value": 119 }, { "id": 120, "name": "名字120", "value": 120 }, { "id": 121, "name": "名字121", "value": 121 }, { "id": 122, "name": "名字122", "value": 122 }, { "id": 123, "name": "名字123", "value": 123 }, { "id": 124, "name": "名字124", "value": 124 }, { "id": 125, "name": "名字125", "value": 125 }, { "id": 126, "name": "名字126", "value": 126 }, { "id": 127, "name": "名字127", "value": 127 }, { "id": 128, "name": "名字128", "value": 128 }, { "id": 129, "name": "名字129", "value": 129 }, { "id": 130, "name": "名字130", "value": 130 }, { "id": 131, "name": "名字131", "value": 131 }, { "id": 132, "name": "名字132", "value": 132 }, { "id": 133, "name": "名字133", "value": 133 }, { "id": 134, "name": "名字134", "value": 134 }, { "id": 135, "name": "名字135", "value": 135 }, { "id": 136, "name": "名字136", "value": 136 }, { "id": 137, "name": "名字137", "value": 137 }, { "id": 138, "name": "名字138", "value": 138 }, { "id": 139, "name": "名字139", "value": 139 }, { "id": 140, "name": "名字140", "value": 140 }, { "id": 141, "name": "名字141", "value": 141 }, { "id": 142, "name": "名字142", "value": 142 }, { "id": 143, "name": "名字143", "value": 143 }, { "id": 144, "name": "名字144", "value": 144 }, { "id": 145, "name": "名字145", "value": 145 }, { "id": 146, "name": "名字146", "value": 146 }, { "id": 147, "name": "名字147", "value": 147 }, { "id": 148, "name": "名字148", "value": 148 }, { "id": 149, "name": "名字149", "value": 149 }, { "id": 150, "name": "名字150", "value": 150 }, { "id": 151, "name": "名字151", "value": 151 }, { "id": 152, "name": "名字152", "value": 152 }, { "id": 153, "name": "名字153", "value": 153 }, { "id": 154, "name": "名字154", "value": 154 }, { "id": 155, "name": "名字155", "value": 155 }, { "id": 156, "name": "名字156", "value": 156 }, { "id": 157, "name": "名字157", "value": 157 }, { "id": 158, "name": "名字158", "value": 158 }, { "id": 159, "name": "名字159", "value": 159 }, { "id": 160, "name": "名字160", "value": 160 }, { "id": 161, "name": "名字161", "value": 161 }, { "id": 162, "name": "名字162", "value": 162 }, { "id": 163, "name": "名字163", "value": 163 }, { "id": 164, "name": "名字164", "value": 164 }, { "id": 165, "name": "名字165", "value": 165 }, { "id": 166, "name": "名字166", "value": 166 }, { "id": 167, "name": "名字167", "value": 167 }, { "id": 168, "name": "名字168", "value": 168 }, { "id": 169, "name": "名字169", "value": 169 }, { "id": 170, "name": "名字170", "value": 170 }, { "id": 171, "name": "名字171", "value": 171 }, { "id": 172, "name": "名字172", "value": 172 }, { "id": 173, "name": "名字173", "value": 173 }, { "id": 174, "name": "名字174", "value": 174 }, { "id": 175, "name": "名字175", "value": 175 }, { "id": 176, "name": "名字176", "value": 176 }, { "id": 177, "name": "名字177", "value": 177 }, { "id": 178, "name": "名字178", "value": 178 }, { "id": 179, "name": "名字179", "value": 179 }, { "id": 180, "name": "名字180", "value": 180 }, { "id": 181, "name": "名字181", "value": 181 }, { "id": 182, "name": "名字182", "value": 182 }, { "id": 183, "name": "名字183", "value": 183 }, { "id": 184, "name": "名字184", "value": 184 }, { "id": 185, "name": "名字185", "value": 185 }, { "id": 186, "name": "名字186", "value": 186 }, { "id": 187, "name": "名字187", "value": 187 }, { "id": 188, "name": "名字188", "value": 188 }, { "id": 189, "name": "名字189", "value": 189 }, { "id": 190, "name": "名字190", "value": 190 }, { "id": 191, "name": "名字191", "value": 191 }, { "id": 192, "name": "名字192", "value": 192 }, { "id": 193, "name": "名字193", "value": 193 }, { "id": 194, "name": "名字194", "value": 194 }, { "id": 195, "name": "名字195", "value": 195 }, { "id": 196, "name": "名字196", "value": 196 }, { "id": 197, "name": "名字197", "value": 197 }, { "id": 198, "name": "名字198", "value": 198 }, { "id": 199, "name": "名字199", "value": 199 }, { "id": 200, "name": "名字200", "value": 200 }],
      currentPage: 1,// 当前页
      pageSize: 10, // 每页多少条数据
    };
  },
3、计算属性 (computed)
  • currentPageData：根据当前页码和每页条数计算当前页应该显示的数据。
javascript 复制代码 
computed: {
    //当前页数据
    currentPageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.tableData.slice(start, end);
    },
  },
4、方法 (methods)
  • handleCurrentChange：当页码改变时触发，更新当前页码。
  • handleSizeChange：当每页条数改变时触发，更新每页条数据。
javascript 复制代码 
methods: {
    // 当前页改变
    handleCurrentChange(page) {
      this.currentPage = page;
    },
    
    // 每页条数改变
    handleSizeChange(val) {
        this.pageSize = val;
    },  
}

二、前端搜索

实现数据搜索功能可以通过绑定输入框的值到搜索条件，并基于这个条件过滤数据来实现。以下是一个简单的示例，展示了如何在 Vue 组件中使用 Element UI 的输入框组件来实现数据搜索功能。

1、模板部分 (<template>)

使用 el-form 组件创建一个内联表单。

使用 el-form-item 和 el-input 组件创建名称搜索字段。

使用 el-form-item 和 el-select、el-option 组件创建类型搜索字段。

使用 el-button 组件创建搜索和重置按钮。

html 复制代码 
<!-- 搜索表单 -->
    <el-form inline :model="searchForm">
      <el-form-item label="名称">
        <el-input v-model="searchForm.name" placeholder="请输入名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="searchForm.type" placeholder="请选择类型" clearable>
          <el-option label="分类1" value="1"></el-option>
          <el-option label="分类2" value="2"></el-option>
          <el-option label="分类3" value="3"></el-option>
          <!-- 可以添加更多选项 -->
        </el-select>
      </el-form-item>
      <!-- 可以添加更多搜索条件 -->
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>
2、数据部分 (data)
  • 维护一个搜索表单数据
javascript 复制代码 
data() {
    return {
      // 搜索表单数据
      searchForm: {
        name: '',
        type: '',
      },
    };
},
3、计算属性 (computed)
  • currentPageData：根据 searchForm 中的条件过滤 tableData数据，如果某个条件为空，则不对该条件进行过滤。然后根据当前页码和每页条数计算当前页应该显示的数据。
javascript 复制代码 
computed: {
    //当前页数据
    currentPageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.tableData.filter(item => {
        return (
          (!this.searchForm.name || item.name.toLowerCase().includes(this.searchForm.name.toLowerCase())) &&
          (!this.searchForm.type || item.value === this.searchForm.type*1)
        );
      }).slice(start, end);
    },
  },
4、方法 (methods)
  • handleSearch：处理搜索的方法
  • resetSearch：重置搜索表单的方法
javascript 复制代码 
    // 处理搜索的方法（可选，因为已经绑定了 v-model 和 computed）
    handleSearch() {
      // 可以在这里执行额外的搜索逻辑，或者只是触发重新渲染（Vue 会自动处理）
      console.log('执行搜索：', this.searchForm);
    },
    // 重置搜索表单的方法
    resetSearch() {
      this.searchForm = {
        name: '',
        type: '',
      };
    },

三、跨页选择

Element UI是一款基于Vue.js的组件库，广泛应用于Web开发。在某些场景下，我们需要实现跨页全选功能，即用户在第一页选择了某些项后，切换到第二页时这些项仍然被选中。下面是一个简单的实现方法。

在Element UI中，我们可以使用el-table组件来展示表格数据，并使用el-table-column组件来定义列。为了实现跨页全选功能，我们需要使用el-table-column组件的type='selection'属性来创建一个选择框列。

我们将所有选中的项存储在变量中。这样，即使用户切换到其他页面，这些选中的项也不会被清除。

1、模板部分 (<template>)

  • el-table绑定 row-key 属性

    行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。

  • el-table绑定 selection-change 事件

    当选择项发生变化时会触发该事件

  • 为每一行添加一个选择框selection列

    实现多选非常简单: 手动添加一个el-table-column，设type属性为selection即可

  • 将selection列设置reserve-selection=true

    仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）

html 复制代码 
<el-table :data="currentPageData" row-key="id" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
      <el-table-column prop="id" label="id" width="180"></el-table-column>
      <el-table-column prop="name" label="Name" width="180"></el-table-column>
      <el-table-column prop="value" label="value"></el-table-column>
</el-table>
2、数据部分 (data)
  • 维护一个选中行的数组
    创建一个新的数组（例如selectedRows）来存储所有被选中的行的ID或唯一标识。这个数组将跨页存储所有选中的项。
javascript 复制代码 
data() {
    return {
      selectedRows: [],// 存储选中行的数组
    };
},
3、方法 (methods)
  • handleSelectionChange：当用户选中或取消选中某行时更新selectedItems数组
javascript 复制代码 
methods: {
    // 更新选中项的数组
    handleSelectionChange(val) {
      this.selectedRows = val.map(item => item);
    },
}

四、限制数量

在 Element UI 的 组件中，限制多选数量可以通过监听 selection-change 事件来实现。以下是一个详细的步骤和示例代码，展示了如何在 Vue 组件中限制 的多选数量。以及限制复选框CheckBox 是否可以勾选。

1、模板部分 (<template>)

  • 增加 selectable 属性

    仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选

  • 增加 ref="multipleTable"

html 复制代码 
<el-table :data="currentPageData" ref="multipleTable" row-key="id" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" :reserve-selection="true"
        :selectable="isSelectable"></el-table-column>
      <el-table-column prop="id" label="id" width="180"></el-table-column>
      <el-table-column prop="name" label="Name" width="180"></el-table-column>
      <el-table-column prop="value" label="value"></el-table-column>
</el-table>
2、数据部分 (data)
  • 维护一个最大选择数量
javascript 复制代码 
data() {
    return {
      maxSelection: 15, // 最大选择数量
    };
},
3、方法 (methods)

  • handleSelectionChange：当用户选中或取消选中某行时更新selectedItems数组

    增加最大选择判断，如果点全选按钮，则截取数组，只取前面this.maxSelection条数据，多余部分取消选中

  • toggleSelection：取消选择

  • isSelectable：是否可选

    用来决定这一行的 CheckBox 是否可以勾选

javascript 复制代码 
methods: {
    // 判断是否超过最大选择数量
      if (val.length > this.maxSelection) {
        // 清除提示
        this.$message.closeAll()
        // 提示
        this.$message({
          message: `最多选择${this.maxSelection}条哦`,
          type: "warning"
        })
      }
      // 截取数组，只取前面this.maxSelection条数据
      let newArr = val.splice(0, this.maxSelection)
      // 更新选中行数组
      this.selectedRows = newArr.map(row => row);
      this.$nextTick(() => {
        // 取消选择
        this.toggleSelection(val)
      })
      
      // 取消选择
    toggleSelection(rows) {
      rows.forEach(row => {
        this.$refs.multipleTable.toggleRowSelection(row, false);
      });
    },

    // 是否可选
    isSelectable(row, index) {
      // 未超过最大选择条数
      if (this.selectedRows.length < this.maxSelection) {
        return true;
      } else {
        // 超过最大选择条数
        let ids = this.selectedRows.map((item) => item.id);
        //判断当前行的唯一标识符 id，是否存在于已选数组中
        if (ids.includes(row.id)) {
          // 已选择的行，可取消禁用
          return true;
        } else {
          // 超过最大选择条数，且当前行未被选中时，禁用
          return false;
        }
      }
    }
    
}

五、效果展示

相关推荐
€键盘人生5 个月前
跟我一起学习和开发动态表单系统-前端用vue、elementui实现方法(3)
java·vue·mvc·mybatis·web·动态表单·element ui·srping boot
赢乐5 个月前
深度剖析：前端如何驾驭海量数据，实现流畅渲染的多种途径
element-plus·虚拟滚动·前端分页·分批渲染·大量数据的渲染·settimeout定时器·滚动触底加载数据
赢乐6 个月前
Vue开发中Element UI/Plus使用指南：常见问题（如Missing required prop: “value“）及中文全局组件配置解决方案
el-table·v-model·element ui·required prop·type=index·不显示序号·配置中文
天外天-亮10 个月前
element + table 行列合并
javascript·element plus·element ui
丰的传说1 年前
element ui el-avatar 源码解析零基础逐行解析
ui·element ui·elementui 源码
朝阳391 年前
el-select 全选
vue·element ui
违规昵称0011 年前
element ui el-date-picker日期时间选择器 设置只能选择不大于30天时间范围
vue.js·elementui·element ui
一只爱web的羊驼1 年前
vue3+emelenui实现前端分页功能—最简单
前端·javascript·vue.js·elementui·前端分页
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作