码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 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" 的回调,回调内获取筛选条件并且发情请求

  • 相关阅读:
    百花齐放:解锁大型语言模型的潜力 | 开源专题 No.32
    java 对接微信支付Native下单API报错: java.security.InvalidKeyException: Illegal key size
    企业运维实践-丢弃手中的 docker build , 使用Kaniko直接在Kubernetes集群或Containerd环境中快速进行构建推送容器镜像
    VMware替换难?听听ZStack 的这3家制造业客户怎么说……
    飞桨paddlespeech语音唤醒推理C定点实现
    RK3568技术笔记之一 RK3568总体介绍
    05_不同路径2(带障碍物版)
    Ag44团簇以及衍生团簇(银纳米团簇直径1-2nm)
    嵌入式笔试面试题目-----每日一题
    Linux中shell外壳,用户权限,文件权限
  • 原文地址:https://blog.csdn.net/wk15038187622/article/details/125507250
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号