个人感觉这个功能是比较好用,而且项目中极可能用得到的。记录一下踩过的坑。
首先,产品要求能直接在表头进行快速筛选,饿了么的表格筛选又满足不了需求
filter-method这个方法获取到的参数值,会拿到当先页面中显示的几条数据进行对比,再筛选,而我想要的是,获取我点击的关键字,再调用接口-刷新页面;
废话不多说直接贴代码和效果图;
<el-tableref="table"v-loading="loading":data="tableData"@filter-change="filterChange"@selection-change="handleSelectionChange":header-cell-style="{color:'#697886',height:'56px'}"><el-table-columnlabel="医生类别"width="110":filter-multiple="false"column-key="type"filter-placement="bottom-end":filters="typeOption":show-overflow-tooltip="true"><template slot-scope="{row}">{{ row.type }}</template></el-table-column></el-table>
filterChange(filters){console.log(filters)if(Object.keys(filters)[0] == "type"){this.params.type = filters.type[0]}if(Object.keys(filters)[0] == "auditStatus"){this.params.auditStatus = filters.auditStatus[0]}this.list()},
关键点:
1、el-table表格的filter-chang;该方法会判断当前点击的是表头具体哪一项;
2、el-table-column中column-key的值要和传参保持一致;也就是需要传给后台查询的参数;例如:params中的type和column-key的type;
附最终效果图
记录那些年踩过的element-ui坑