Vue实现ElementUI表格数据筛选

"这篇教程介绍了如何在Vue.js项目中，结合ElementUI库，实现一个简单的表格数据筛选查找功能。" 在Vue.js应用中，我们经常需要处理大量的数据并展示在表格中，同时提供筛选功能来帮助用户快速找到所需信息。ElementUI是一个流行的UI组件库，它提供了丰富的表格组件，使得在Vue项目中构建交互式的表格变得容易。本教程将指导你如何创建一个基于ElementUI的表格，并实现数据筛选功能。 首先，我们要关注的是页面的布局。在布局代码中，可以看到有三个主要部分：搜索ID、搜索关键字和性别筛选。这些元素用于收集用户的筛选条件。布局代码使用了基本的HTML结构，包括搜索框和下拉菜单，它们是筛选功能的核心交互元素。 ```html <!-- 布局代码 --> <div> <el-input placeholder="搜索ID" v-model="inputId"></el-input> <el-input placeholder="搜索关键字" v-model="inputName"></el-input> <el-select v-model="value"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> ``` 接下来是样式代码，它设置了页面的基本样式，包括背景色、头部和内容区域的样式，确保界面整洁且易于阅读。 ```css /* 样式代码 */ * { margin: 0; padding: 0; } #app { background: #ccc; } .header { width: 100%; margin-bottom: 30px; } .content { padding-left: 30px; } .row1 { height: 60px; line-height: 60px; margin: 10px 0; } .eltable1 { overflow: scroll; } ``` 在Vue代码部分，首先导入了自定义组件`comtitle`，然后定义了组件的数据属性，包括原始数据列表`studentsList`、新数据列表`studentsNewList`、搜索关键字`inputName`、搜索ID`inputId`以及性别筛选选项`options`和`value`。`studentsNewList`将存储经过筛选后的数据。 ```javascript // Vue代码 export default { name: "demo2", data() { return { studentsList: [], studentsNewList: [], inputName: '', inputId: null, options: [ { value: 0, label: '全部' }, { value: 1, label: '男' }, { value: 2, label: '女' } ], value: 0 }; }, methods: { getStudentsNum() { this.$axios.get('http://127.0.0.1:9091/getall') .then(result => { this.studentsNewList = this.studentsList = result.data; }) .catch(err => { console.log(err); }); }, searchId(keywords) { return this.studentsList.filter(item => item.id === keywords); }, searchName(keywords) { return this.studentsList.filter(it => it.name.includes(keywords)); }, // ... }, // ... }; ``` 在`methods`中，有两个关键的筛选方法：`searchId`和`searchName`。这两个方法分别根据ID和姓名进行过滤，使用了JavaScript的`filter`函数。`searchId`检查每个对象的`id`属性是否与输入的ID匹配，而`searchName`则通过`includes`方法检查姓名是否包含输入的关键字。 在实际应用中，可能还需要处理性别筛选，这可以通过增加一个`searchGender`方法实现，该方法根据选择的性别选项（`value`）过滤数据。同时，为了响应用户的操作，你需要监听输入框和下拉菜单的变化，实时更新筛选结果。例如，可以使用`@input`事件监听器。 ```javascript // 在Vue实例中添加以下方法 watch: { inputId(newId) { this.studentsNewList = this.searchId(newId); }, inputName(newName) { this.studentsNewList = this.searchName(newName); }, value(newGenderValue) { this.studentsNewList = this.studentsList.filter(item => item.gender === newGenderValue || newGenderValue === 0); } } ``` 至此，你已经掌握了如何在Vue.js和ElementUI中实现一个简单的表格数据筛选查找功能。这个功能允许用户通过ID、姓名和性别来筛选表格中的数据，提高数据浏览的效率。在实际开发中，你可以根据需要扩展这个功能，例如添加更多筛选条件，或者实现更复杂的排序和分页功能。