当前位置:   article > 正文

Element table分页表单使用筛选_el-table 分页filter-method过滤

el-table 分页filter-method过滤

1.Form表单开放了filters对数据进行筛选

: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'}]"

2.通过filter-method回调对当前页数据,返回每条数据和value相同的数据,筛选,注意是当前页

:filter-method="filterHandler"

3.如果实现整体筛查,已经不能算整体筛查了,因为分页的原因,需要额外调用接口,那么filter-method就不能使用了,否则回调会进行多次请求接口

4,分页情况下对table标签添加@filter-change="xxx" 回调结果是当前filters修改的内容

  1. //html
  2. <el-table :data="pageData" @filter-change="filterChange"></el-table>
  3. //methods
  4. filterChange(filters){
  5. console.log(filters)
  6. }

5.但是依旧会触发filter-method的回调所以在filter去除filter-method的添加cloumn-key="xxx"添,cloumn-key设置的值就是上面filterChange上回调后的key绑定,{key:[筛选条件]}

  1. <el-table-column
  2. label="Content"
  3. width="250"
  4. column-key="content"
  5. :filtered-value="filteredValue"
  6. :filters="filtersList"
  7. filter-placement="bottom-end">
  8. <template slot-scope="scope">
  9. <span>{{scope.row.content}}</span>
  10. </template>
  11. </el-table-column>

6.基本需求已经实现,总结,去除filter-method的回调,设置cloumn-key="xxx",在table标签添加@filter-change="xxx" 的回调,回调内获取筛选条件并且发送请求

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/103125
推荐阅读
相关标签
  

闽ICP备14008679号