Javascript

vue单页面-element-表格搜索

本文主要是介绍vue单页面-element-表格搜索，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

vue单页面-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: "xiao1",
							age: "18",
							stime: new Date()
						},
						{
							name: "hong2",
							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>

原图

在这里插入图片描述

搜索效果

在这里插入图片描述

这篇关于vue单页面-element-表格搜索的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航