Element table分页表单使用筛选

Mr-K

已于 2022-06-29 09:42:55 修改

阅读量2k

点赞数 2

分类专栏： Element-UI 文章标签：前端 javascript 开发语言

于 2022-06-28 18:11:46 首次发布

本文链接：https://blog.youkuaiyun.com/wk15038187622/article/details/125507250

版权

Element-UI 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了在Vue.js中如何利用Element UI的Table组件实现数据筛选和分页。通过设置`filters`属性和`filter-method`回调，可以对表格数据进行定制化筛选。然而，为了实现全局筛选，需要考虑到分页的影响，避免因多次请求接口导致的问题。文章还提到了`@filter-change`事件，用于监听筛选条件变化，并在事件回调中发送请求更新数据。同时，通过设置`column-key`并移除`filter-method`，可以避免不必要的回调。总结来说，正确处理表格筛选和分页交互，是提升前端数据展示效率的关键。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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修改的内容

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

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

<el-table-column
    label="Content"
    width="250"
    column-key="content"
    :filtered-value="filteredValue"
    :filters="filtersList"
    filter-placement="bottom-end">
       <template slot-scope="scope">
           <span>{{scope.row.content}}</span>
       </template>
</el-table-column>

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