Element Plus助力Vue项目！创建、筛选、统计，一步到位

2024-04-05 技术资讯推广

二、创建数据源和筛选组件在App.vue中，我们首先创建一个数据源和一个包含筛选条件的组件。在App.vue中，我们可以编写一个统计组件，将筛选得到的数据进行可视化展示。至此，我们已经完成了数据的筛选和统计功能的代码编写。plus实现数据的

一、创建项目并引入Element Plus

vue create data-filter

赶紧动手搞起来！首先，用vue CLI建个新项目呗。记得装上Element Plus哦；然后，去主要的JS文件里把Element Plus加进去，这样之后就能愉快地使用。

cd data-filter
npm install element-plus

二、创建数据源和筛选组件

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
createApp(App).use(ElementPlus).mount('#app')

咱们来搞定App.vue，加几个数据跟筛选功能呗。说白了，数据不就是一堆有各种内容的东西，主要用来辅助筛选和运算。再看筛选工具，选择多多，比如输入框啊、下拉菜单什么的，这样大家用起来就方便多。

别着急，咱得先找好要用的data在哪儿，就是那一栏叫data的。把初始的测试数据输进去呗。接着，咱们要定个筛选条件。比如说填写名字的框，或者选年龄啥的。这 filterDate 厉害着，按你填的条件就能随机生成合乎要求的数据！这样一来，统计起来就省心多！

三、编写统计组件

  
    
      
      
        
        
        
      
    
    
      {{ item.name }}
    
  


export default {
  data() {
    return {
      filterText: '',
      filterAge: '',
      data: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 25 },
        { id: 3, name: '王五', age: 30 },
        // ...
      ]
    }
  },
  computed: {
    filteredData() {
      return this.data.filter(item => {
        return (item.name.includes(this.filterText) || item.age.toString() === this.filterAge)
      })
    }
  }
}

Element Plus助力Vue项目！创建、筛选、统计，一步到位

终于又来了，我想问问你们有没有听说过element plus这个工具。用它做数据统计太简单了，不过说到实用度，得说是统计图表功能最好使。今天我们就在App.vue文件里面加一个统计插件，使用echart来看图表。首先搞清楚要把图表和按钮放在哪里，这样方便随时看。接着，利用showStatisticChart这个函数创建echart的图表实例，这就要用到之前筛选好的数据。然后根据自己设置的option参数，就能让echart知道怎么画图和展现数据咯。最后，大功告成，你的统计插件就能帮你搞定需要的数据！

这里有个柱形图，横轴是你的名字，纵轴是年纪，看看大家都多大了。然后就是挑上准备好的参数，搞定就成了！

四、运行项目

搞定筛选统计后，赶紧试试看你的项目！记得先登录账号，挑个端口号，然后在浏览器里输入地址瞧瞧成效咯~

  
    
      
    
    
      
    
    
    点击统计
  


import echarts from 'echarts'
export default {
  // ...
  methods: {
    showStatisticChart() {
      const chart = echarts.init(this.$refs.chart)
      const data = this.filteredData
      const names = data.map(item => item.name)
      const ages = data.map(item => item.age)
      const option = {
        tooltip: {},
        legend: {
          data: ['年龄']
        },
        xAxis: {
          data: names
        },
        yAxis: {},
        series: [{
          name: '年龄',
          type: 'bar',
          data: ages
        }]
      }
      chart.setOption(option)
    }
  }
}

只需填个名字或选个岁数，这页面就会自动显示你想要的内容再点下“查看点击量”这个小按钮，就能立刻看到最基本的柱形图表，马上就能知道大家都是各几岁的啦

用 Vue 搭配合 Element Plus，做数据筛选和统计简直轻松到飞起！有了 Element Plus 的 UI 组件库助力，你可以迅速做出一个超赞的网页，让客户满意度飙升！

教你用Vue和Element Plus搞定数据筛选和分析，让页面更有趣味性，还能让大家知道数据到底在说什么呢!赶紧动手试试，看看能擦出怎样的火花！