element ui使用筛选功能实现前端本地表格搜索

之前自己模拟过一个,但由于是自己写的,比较复杂,有兴趣的同学可以看看这篇文章,element 前端实现表格的本地增删改查,最近发现element官网有一个叫筛选器的东西,由于文档关于筛选器介绍的不太明白,通过研究,筛选器是可以实现本地搜索的,下面上代码。

<!DOCTYPE html>
<html>
	<head>
		<title>vue-test2</title>
		<!-- 引入样式 -->
		<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.css" rel="stylesheet">
		<!-- 引入组件库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.js"></script>
	</head>
	<body>
		<div id="app">
			<h2>信息管理</h2>
			<el-form :inline="true">
				<el-form-item label="搜索">
					<el-input v-model.trim="search"  placeholder="输入姓名"></el-input>
					<el-input v-model.trim="age"  placeholder="输入年龄"></el-input>
				</el-form-item>
				<!-- <el-button type="primary" icon="el-icon-search" @click="handlesearch"></el-button> -->
			</el-form>
			<template>
				<el-table ref="multipleTable" :data="handlesearch(tableData)"  :row-key="getRowKey"  style="width: 100%"
				 @selection-change="handleSelectionChange">
					<el-table-column type="selection" :reserve-selection="true"  width="55">
					</el-table-column>
					<el-table-column type="index" label="序号"  width="60" >
					</el-table-column>
					<el-table-column prop="name" label="姓名" width="180">
					</el-table-column>
					<el-table-column prop="age" label="年龄">
					</el-table-column>
				</el-table>
			</template>

		</div>
		<script type="text/javascript">
			<!-- 过滤器 -->
			var vm = new Vue({
				el: "#app",
				data: {
					name: "",
					age: "",
					search: "",
					tableData: [{
							name: "donlex1",
							age: "18",
							stime: new Date()
						},
						{
							name: "donlex2",
							age: "19",
							stime: new Date()
						}
					]
				},
				methods: {
					getRowKey (row) {
					      return row.age
					    },
					handlesearch: function() { //第30行调用了该方法
						return this.tableData.filter(item => {
							if (item.name.includes(this.search) && item.age.includes(this.age)) {
								// 字符串索引有关键字值,返回true
								return item
							}
						})
					},
					// 搜索后不影响选中效果 分页换页也可以使用此方法
					handleSelectionChange(val) {
						this.multipleSelection = val;
						console.log(val)
					}

				}
			})
		</script>
	</body>
</html>

效果展示:


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/1187.html