element ui el-table展示列表,结合分页+过滤功能

2024-01-10 12:41:39

vue+element-ui实现的列表展示,列表分页,列表筛选功能

1,分页器

el-table模块下面是分页器代码?<el-pagination></el-pagination>

<el-table>

</el-table>
<!-- 分页器 -->
 <div class="block" style="margin-top:15px;margin-left:60%" v-if="tableData">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10,20,30,40,50,100]"
                        :page-size=10
                        layout="total, prev, pager, next,jumper"
                        :total="tableData.length">
                    </el-pagination>
       </div>

分页器? layout 属性表示组件布局

设置layout,表示分页器需要显示的内容,用逗号分隔,布局元素会依次显示。prev表示上一页,next为下一页,pager表示页码列表,除此以外还提供了jumpertotalsize和特殊的布局符号->->后的元素会靠右显示,jumper表示跳页元素,total表示显示页码总数,size用于设置每页显示的页码数量。

size-change 表示处理页码大小

current-change表示页面变动时触发的事件

page-sizes接受整型数组,数组元素为展示的选择每页显示个数的选项,[100, 200, 300, 400]表示四个选项,每页显示 100 个,200 个,300 个或者 400 个。

current-change 表示当前页,接受一个初始值表示首页在第几页。

page-size 表示每页item个数

total表示总体item数,例子代码中赋值为tableData的长度

2,过滤器

过滤功能

在<el-table-column>中设置filters,filter-method属性即可开启该列的筛选,filters 是一个数组,filter-method是一个方法,它用于决定某些数据是否显示,会传入三个参数:value, row 和 column

用例代码:

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180"
      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
      :filter-method="filterHandler"
    >
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter">
    </el-table-column>
    <el-table-column
      prop="tag"
      label="标签"
      width="100"
      :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.tag === '家' ? 'primary' : 'success'"
          disable-transitions>{{scope.row.tag}}</el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          tag: '家'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          tag: '公司'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          tag: '家'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          tag: '公司'
        }]
      }
    },
    methods: {
      formatter(row, column) {
        return row.address;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      }
    }
  }
</script>

?filters是数组形式,元素是object类型,包括text属性和value属性。text属性时过滤下拉后让选择的选项,选择后使用相应的value值去匹配。匹配的方法是filter-method。

筛选后,每行数据 row都会进行filter-method的判断。

filterHandler分析

filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      }

column['property']是当前列的prop属性值,比如如下代码,该column['property']是module。不设置该属性column['property']就是undefined,自然也无法选择出想要的数据。

  <el-table-column
      prop="module"
      :filters= "headFilters['module']"
      :filter-method="filterHandler"
      label="模块"
      min-width="3%"> </el-table-column>

一般的比较都是return row[property] === value;即 每行的module属性值与选中的filter item的value值相等选中。

3,结合使用遇到的问题

问题一:如何实现,点击新的页码或者下一页,table数据变化为相应的数据

el-table组件和el-pagination组件其实是两个分开的组件。

他们的联系是通过tableData来进行的。分页组件其实是产生了很多属性及其值,比如当前页currentPage,pageSize当前页的展示数据量pageSize。所以,el-table的“:data”属性就是计算后的分页段的数据:?

<el-table v-if="tableData" :key="fresh_table" :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" 

问题二:加上过滤功能后,如何使得分页正常工作

以上<el-pagination>和过滤器的设置,是不是就能正常工作了呢?会存在一个问题,比如一个列表,分页每页10条数据,然后筛选。第一页10条数据,符合筛选规则5条,会呈现5条数据。第二页10条数据有3条符合规则,会在第三页展示3条数据。就是筛选只在每页筛选,分页器的总条数还是筛选前的总数据条数。如何改变呢?

el-table 有filter-change属性

filter-change当表格的筛选条件发生变化的时候会触发该事件,参数的值是一个对象,对象的 key 是 column 的 columnKey,对应的 value 为用户选择的筛选条件的数组。filters

可以利用该参数,进行一个table的数据再计算。就是?<el-table v-if="tableData" :key="fresh_table" :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" 的tableData是过滤后的结果。

可以这样实现:

el-table定义filter-change:

            <el-table v-if="tableData" :key="fresh_table" :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" @filter-change="handleFilterChange" width="100%">

handleFilterChange实现:

handleFilterChange(value){
                    if (!this.filterValue) {
                    // 如果用户没有选择任何筛选条件,直接返回原始表格数据
                    this.tableData=this.issues_detail;
                    }
                    // 使用 filter 方法过滤表格数据
                    this.tableData=this.issues_detail.filter((row) => row[this.filterKey] === this.filterValue);
                    this.fresh_table=!this.fresh_table
                },

其中变量 filterValue, filterKey,即fresh_table是定义在vue data对象中的变量:

  var history = new Vue({
 
            el: "#ss",
            data: {
               ....
                filterValue:null,
                filterKey:null,
                fresh_table:true,
                tableData:null,
               .....
            },

filterValue, filterKey记录过滤的key-vlaue值,在filterHandler中赋值。

<el-table>
....

<el-table-column
      prop="module"
      :filters= "headFilters['module']"
      :filter-method="filterHandler"
      label="模块"
      min-width="3%"> </el-table-column>
.....
</el-table>

.....
//位于vue的method中定义
 filterHandler(value, row, column) {
        
                    const property = column['property'];
                    this.filterValue=value
                    this.filterKey=property
                   return row[property] === value;
                },

以上fresh_table的使用,结合:key="fresh_table" ?,筛选完后改变其值使得列表更新,使用筛选后的tableData进行列表渲染

<el-table v-if="tableData" :key="fresh_table" :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" @filter-change="handleFilterChange" width="100%">

以上基本就能实现分页+筛选列表功能,筛选后总体数量会变为符合筛选条件的数量,筛选结果分页。

文章来源:https://blog.csdn.net/yuxuan89814/article/details/135488951
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。