1.简介
Vue.js是一个JavaScript框架，可以完美实现数据的动态绑定和交互操作，非常适用于前端开发。Element-plus是一套基于Vue.js的组件库，提供了各种常用的UI组件，开发者可以轻松构建优秀的Web应用程序。
本文介绍如何使用Vue.js和Element-plus实现数据的筛选和统计。
2.要求
本文假设您已经拥有了Vue.js和Element-plus的基础知识，如果您还不了解这两个框架，请先学习相关知识。
本文将使用JSON数据作为例子，并通过Vue.js和Element-plus实现数据的筛选和统计功能。
3.JSON数据
3.1 数据结构
假设我们有一个JSON数据，包含多个员工的信息：
{
"employees": [
{
"name": "John Doe",
"gender": "Male",
"age": 32,
"salary": 50000
},
{
"name": "Jane Doe",
"gender": "Female",
"age": 28,
"salary": 40000
},
{
"name": "Peter Parker",
"gender": "Male",
"age": 25,
"salary": 35000
},
{
"name": "Mary Jane",
"gender": "Female",
"age": 26,
"salary": 45000
}
]
}
该数据结构包含一个名为"employees"的数组，每个员工包含以下信息：
name：员工姓名
gender：员工性别
age：员工年龄
salary：员工薪资
我们将使用该数据结构进行数据的筛选和统计操作。
4.Vue.js代码
4.1 组件
我们可以将数据筛选和统计功能封装成一个Vue.js组件：
<template>
<div>
<el-input v-model="search" placeholder="请输入关键字进行搜索"></el-input>
<el-table :data="filteredData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="salary" label="薪资"></el-table-column>
</el-table>
<p>平均薪资：<strong>{{averageSalary}}</strong></p>
<p>男性员工数量：<strong>{{maleCount}}</strong></p>
<p>女性员工数量：<strong>{{femaleCount}}</strong></p>
</div>
</template>
<script>
export default {
data() {
return {
search: '',
data: [
{
name: 'John Doe',
gender: 'Male',
age: 32,
salary: 50000
},
{
name: 'Jane Doe',
gender: 'Female',
age: 28,
salary: 40000
},
{
name: 'Peter Parker',
gender: 'Male',
age: 25,
salary: 35000
},
{
name: 'Mary Jane',
gender: 'Female',
age: 26,
salary: 45000
}
]
}
},
computed: {
filteredData() {
return this.data.filter(item => {
return item.name.includes(this.search)
})
},
maleCount() {
return this.data.filter(item => {
return item.gender === 'Male'
}).length
},
femaleCount() {
return this.data.filter(item => {
return item.gender === 'Female'
}).length
},
averageSalary() {
let sum = 0
this.data.forEach(item => {
sum += item.salary
})
return (sum / this.data.length).toFixed(2)
}
}
}
</script>
该组件包含以下功能：
el-input组件：用于输入关键字进行搜索
el-table组件：用于展示筛选后的数据
平均薪资：用于统计所有员工的平均薪资
男性员工数量：用于统计所有男性员工的数量
女性员工数量：用于统计所有女性员工的数量
使用computed属性实现数据筛选和统计功能，computed属性可以根据data的变化自动更新显示。
4.2 注册组件
在Vue.js中需要将组件注册到Vue实例中才能使用：
import Vue from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
Vue.use(ElementPlus)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
使用Vue.use(ElementPlus)将Element-plus注册到Vue实例中。
4.3 渲染组件
在HTML页面中渲染该组件：
<body>
<div id="app">
<my-component></my-component>
</div>
<script src="./main.js"></script>
</body>
其中my-component是前面定义的组件名。
5.Element-plus代码
5.1 el-input组件
使用el-input组件实现输入框：
<el-input v-model="search" placeholder="请输入关键字进行搜索"></el-input>
其中v-model绑定了search，使得输入框中输入的内容自动保存到search中。
5.2 el-table组件
使用el-table组件实现表格：
<el-table :data="filteredData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="salary" label="薪资"></el-table-column>
</el-table>
其中:data绑定了filteredData，使得表格中显示的内容为筛选后的数据。
5.3 el-table-column组件
使用el-table-column组件实现表格的列：
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="salary" label="薪资"></el-table-column>
其中prop绑定了数据结构中的属性，label定义了列的名字。
5.4 el-table组件的属性
el-table组件还有很多属性可以配置，例如：
stripe：是否显示斑马线表格
border：是否显示表格边框
height：表格高度
max-height：表格最大高度
highlight-current-row：是否高亮当前行
row-class-name：设置行的样式
5.5 el-table的方法
el-table组件还有很多方法可以调用，例如：
getCurrentRow()：获取当前行的数据
clearSelection()：清空已选择的行
toggleRowSelection(row, selected)：选择/取消选择指定行
6.总结
使用Vue.js和Element-plus可以轻松实现数据的筛选和统计，开发者可以根据自己的需求灵活使用这些功能。