element使用table自带筛选后,分页总数计数跟随改变

  • 知识点:主要用到table的@filter-change="filterChange"属性方法,结合定义的total(数据共多少条)
<el-table 
		ref="table"
      @filter-change="filterChange"
       >
<el-table-column label='是否管控'  prop="inspe"  align="center"
        :filters="[{ text: '是', value: true }, { text: '否', value: false }]"
        :filter-method="filterHandlerClass">
          <template slot-scope="scope" >
            {{scope.row[scope.column.property]?'是':'否'}}
          </template>
        </el-table-column>
 </ el-table>

// js

    filterHandlerClass(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
   filterChange() {
      this.total = this.$refs.table.tableData.length; // 注意这里tableData是固定的字段是table自带的属性,不是我们自定义的那个数据字段,所以不能修改
      console.log(this.total);
    }
  • 11
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用Element UI实现分页的示例代码: ```html <template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="1000"> </el-pagination> </div> </template> <script> export default { data() { return { tableData: [], currentPage: 1, pageSize: 10 }; }, methods: { handleSizeChange(val) { this.pageSize = val; this.getTableData(); }, handleCurrentChange(val) { this.currentPage = val; this.getTableData(); }, getTableData() { // 发送请求获取表格数据 // 根据this.currentPage和this.pageSize获取对应的数据 // 将数据赋值给this.tableData } }, mounted() { this.getTableData(); } }; </script> ``` 在上述代码中,我们使用了`el-table`组件来展示表格数据,使用`el-pagination`组件来实现分页功能。其中,`el-pagination`组件的`current-page`属性和`page-size`属性分别绑定了当前页码和每页显示条数,`@size-change`和`@current-change`事件分别监听了每页显示条数和当前页码的变化,当这些值发生变化时,会触发对应的事件处理函数,我们可以在这些事件处理函数中发送请求获取对应的数据并更新表格数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值