element的table列筛选,调用后端接口过滤数据显示
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
官方讲解 #筛选
但是官网举的例子是对已知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 个月前
更多推荐
已为社区贡献6条内容
所有评论(0)