VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法

简介: VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法

步骤:

模板中定义:

<el-table
  :data="showDetailrowtableDatas"
   border
   height="300px"
   :show-summary="true"
   :summary-method="getSummaries"
 >
 <el-table-column
    v-for="(list, listindex) in detailrowtabledataslist"
    :key="listindex"
    :prop="list.prop"
    :label="list.label"
    :type="list.type"
    :sortable="list.sortable"
    :width="list.width"
    :formatter="list.formatter"
  >
<el-table/>

定义data数据:

data() {
    return {
         detailrowtabledataslist: [
            {
              prop: 'orderNumber',
              label: '订单编号',
              sortable: true,
              width: '120px',
              keynum: 1,
              search: ''
            },
            {
              prop: 'selfNo',
              label: '自编号',
              width: '120px',
              keynum: 1,
              search: ''
            },
            {
              prop: 'projectName',
              label: '项目名称',
              keynum: 1,
              search: '',
              width: '120px'
            }
    ]    
    }
}

计算属性中对data进行过滤:

computed: {
    showDetailrowtableDatas() { //重点!!!
      const detailSearchParams = this.detailSearchParams
      console.log(detailSearchParams)
      let arr = JSON.parse(JSON.stringify(this.detailrowtableDatas))
      Object.keys(detailSearchParams || {}).forEach(key => {
        arr = arr.filter(el => (el[key] + '').includes(detailSearchParams[key]))
      })
      console.log(arr)
      return arr
    },
    detailSearchParams: {
      get() {
        return {
          orderNumber: this.getSearchSelectValue('orderNumber'),
          selfNo: this.getSearchSelectValue('selfNo'),
          projectName: this.getSearchSelectValue('projectName'),
          productName: this.getSearchSelectValue('productName'),
          width: this.getSearchSelectValue('width'),
          height: this.getSearchSelectValue('height'),
          floorNumber: this.getSearchSelectValue('floorNumber')
        }
      },
      set(newValue) {
        this.tabledataslist = this.detailrowtabledataslist.map(el => {
          const propsKey = el.prop
          return {
            ...el,
            search: newValue[propsKey] || ''
          }
        })
      }
    }
  }

获取参数json用于和表格prop进行比对:

methods: {
    getSearchSelectValue(key) {
      const item = this.detailrowtabledataslist.find(el => el.prop === key)
      console.log(item)
      return item.search
    }
}

看效果:
在这里插入图片描述
此方法不仅筛选速度快,而且不调用接口减小服务器压力(注意:双表头前面的博文有详细介绍)

相关文章
|
6天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
132 89
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
3月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
5天前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
50 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
87 5
|
3月前
|
监控 前端开发 jenkins
Jenkins 在前端项目持续部署中的应用,包括其原理、流程以及具体的实现方法
本文深入探讨了Jenkins在前端项目持续部署中的应用,涵盖其基本原理、流程及具体实现方法。首先介绍了Jenkins的基本概念及其在自动化任务中的作用,随后详细解析了从前端代码提交到生产环境部署的全过程,包括构建、测试、部署等关键步骤。最后,强调了持续部署中的代码质量控制、环境一致性、监控预警及安全管理等注意事项,旨在帮助开发者高效、安全地实施持续部署。
91 5
|
4月前
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
|
5月前
|
前端开发
前端基础(十四)_隐藏元素的方法
本文介绍了几种在前端开发中隐藏元素的方法,包括使用`display:none`、`visibility:hidden`、`opacity:0`等CSS属性,并提供了相应的示例代码。此外,还提到了其他隐藏元素的技巧,如通过设置元素位置、使用`overflow`属性和`filter`属性以及`rgba`颜色值来实现元素的隐藏。
84 2
前端基础(十四)_隐藏元素的方法
|
5月前
|
前端开发 JavaScript
前端基础(九)_this基本使用、this指向判断、改变this指向的方法
本文介绍了JavaScript中this的基本使用、this指向的判断以及改变this指向的方法。
78 1
前端基础(九)_this基本使用、this指向判断、改变this指向的方法
|
4月前
|
前端开发 JavaScript
掌握微前端架构:构建现代Web应用的新方法
本文介绍了微前端架构的概念及其在现代Web应用开发中的优势与实施方法。微前端架构通过将应用拆分成独立模块,提升了开发效率和灵活性。其核心优势包括技术栈灵活性、独立部署、团队协作及易于维护。文章详细阐述了定义边界、选择框架、管理状态和通信等关键步骤,并讨论了状态同步、样式隔离及安全性等挑战。微前端架构有望成为未来Web开发的重要趋势。
|
5月前
|
前端开发 开发者 UED
前端只是切图仔?来学学给开发人看的UI设计
该文章针对前端开发者介绍了UI设计的基本原则与实践技巧,覆盖了布局、色彩理论、字体选择等方面的知识,并提供了设计工具和资源推荐,帮助开发者提升产品的视觉与交互体验。

热门文章

最新文章