官方讲解 #筛选
在这里插入图片描述
但是官网举的例子是对已知table数据的筛选,但是在实际运用中,我们当前页面只显示20条数据,获取不到所有的数据。。。。。
我们想将选中的时间传递到后台返回筛选结果。
:filter-multiple=“false” false表示单选,true为多选
@filter-change=“filterChange” :选中后调用的方法

<el-table
    ref="filterTable"
    :data="tableData"
    @filter-change="filterChange"
    style="width: 100%">
    <!--其他列-->
    <el-table-column label="time" prop="time"
         :filter-multiple="false"
         :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-placement="bottom-end"
         :column-key="'time'">
     </el-table-column>
     <!--其他列-->
</el-table>
//methods
filterChange(filters){
   console.log(filters.time);
   console.log("filterChange");
   this.filterData.status = filters.time[0] || "";
   //调用接口获取数据
 },
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐