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

文章目录

一、前端分页

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

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

1、模板部分 ()

使用el-table展示当前页的数据。
使用el-pagination组件实现分页控件，绑定相关属性和事件。

<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;">

2、数据部分 (data)

tableData：包含所有数据的数组。
currentPage：当前页码。
pageSize：每页显示的数据条数。

data() {

return {

tableData: ,

currentPage: 1,// 当前页

pageSize: 10, // 每页多少条数据

};

},

3、计算属性 (computed)

currentPageData：根据当前页码和每页条数计算当前页应该显示的数据。

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：当每页条数改变时触发，更新每页条数据。

methods: {

// 当前页改变

handleCurrentChange(page) {

this.currentPage = page;

},
复制代码
```
// 每页条数改变
handleSizeChange(val) {
    this.pageSize = val;
},  
```
}

二、前端搜索

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

1、模板部分 ()

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

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

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

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

复制代码

<!-- 搜索表单 -->
    <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)

维护一个搜索表单数据

data() {

return {

// 搜索表单数据

searchForm: {

name: '',

type: '',

},

};

},

3、计算属性 (computed)

currentPageData：根据 searchForm 中的条件过滤 tableData数据，如果某个条件为空，则不对该条件进行过滤。然后根据当前页码和每页条数计算当前页应该显示的数据。

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：重置搜索表单的方法

复制代码

// 处理搜索的方法（可选，因为已经绑定了 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、模板部分 ()

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）

<el-table :data="currentPageData" row-key="id" style="width: 100%"

@selection-change="handleSelectionChange">

2、数据部分 (data)

维护一个选中行的数组

创建一个新的数组（例如selectedRows）来存储所有被选中的行的ID或唯一标识。这个数组将跨页存储所有选中的项。

data() {

return {

selectedRows: \[\],// 存储选中行的数组

};

},

3、方法 (methods)

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

methods: {

// 更新选中项的数组

handleSelectionChange(val) {

this.selectedRows = val.map(item => item);

},

}

四、限制数量

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

1、模板部分 ()

增加 selectable 属性

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

<el-table :data="currentPageData" ref="multipleTable" row-key="id" style="width: 100%"

@selection-change="handleSelectionChange">

2、数据部分 (data)

维护一个最大选择数量

data() {

return {

maxSelection: 15, // 最大选择数量

};

},

3、方法 (methods)

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

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

isSelectable：是否可选

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

methods: {

// 判断是否超过最大选择数量

if (val.length > this.maxSelection) {

// 清除提示

this. m e s s a g e . c l o s e A l l ( ) / / 提示 t h i s . message.closeAll() // 提示 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;
    }
  }
}

}

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

文章目录

一、前端分页

1、模板部分 ()

2、数据部分 (data)

3、计算属性 (computed)

4、方法 (methods)

二、前端搜索

1、模板部分 ()

2、数据部分 (data)

3、计算属性 (computed)

4、方法 (methods)

三、跨页选择

1、模板部分 ()

2、数据部分 (data)

3、方法 (methods)

四、限制数量

1、模板部分 ()

2、数据部分 (data)

3、方法 (methods)

五、效果展示