• Element table分页表单使用筛选


    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" 的回调,回调内获取筛选条件并且发情请求

  • 相关阅读:
    虚拟机中centos扩展根目录空间
    Java服务假死后续之内存溢出
    两日总结十三
    【操作系统-线程池】Pthread 线程池的设计及实现
    87.(cesium篇)cesium热力图(贴地形)
    N5235B是德科技网络分析仪50GHz
    Gradle 出现 Could not resolve gradle
    Banana Pi BPI-W3 RK3588开发板基本使用文档
    L4W2KT作业 Keras教程
    UT代码编译至build文件夹
  • 原文地址:https://blog.csdn.net/wk15038187622/article/details/125507250