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
    }
}

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

相关文章
|
4月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
448 1
|
5月前
|
移动开发 前端开发 JavaScript
Vue与React两大前端框架的主要差异点
以上就是Vue和React的主要差异点,希望对你有所帮助。在选择使用哪一个框架时,需要根据项目的具体需求和团队的技术栈来决定。
358 83
|
6月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
296 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
7月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
394 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
4月前
|
JavaScript 前端开发 编译器
Vue与TypeScript:如何实现更强大的前端开发
Vue.js 以其简洁的语法和灵活的架构在前端开发中广受欢迎,而 TypeScript 作为一种静态类型语言,为 JavaScript 提供了强大的类型系统和编译时检查。将 Vue.js 与 TypeScript 结合使用,不仅可以提升代码的可维护性和可扩展性,还能减少运行时错误,提高开发效率。本文将介绍如何在 Vue.js 项目中使用 TypeScript,并通过一些代码示例展示其强大功能。
208 22
|
6月前
|
人工智能 JavaScript 前端开发
Vue 性能革命:揭秘前端优化的终极技巧;Vue优化技巧,解决Vue项目卡顿问题
Vue在处理少量数据和有限dom的情况下技术已经非常成熟了,但现在随着AI时代的到来,海量数据场景会越来越多,Vue优化技巧也是必备技能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
10月前
|
JavaScript 前端开发 搜索推荐
Vue的数据驱动视图与其他前端框架的数据驱动方式有何不同?
总的来说,Vue 的数据驱动视图在诸多方面展现出独特的优势,其与其他前端框架的数据驱动方式的不同之处主要体现在绑定方式、性能表现、触发机制、组件化结合、灵活性、语法表达以及与后端数据交互等方面。这些差异使得 Vue 在前端开发领域具有独特的地位和价值。
208 58
|
8月前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
172 10
|
10月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
10月前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略