element表格点击下一页或筛选时不影响选中状态

element表格点击下一页或筛选时不影响选中状态,此方法在官网有,虽然不明显,我遇到的需求就是本地搜索后不要改变选中状态,此方法对查后台的分页同样有效。 重点代码: el-table里加这个代...

element表格点击下一页或筛选时不影响选中状态,此方法在官网有,虽然不明显,我遇到的需求就是本地搜索后不要改变选中状态,此方法对查后台的分页同样有效。

重点代码:

el-table里加这个代码  :row-key="getRowKey"

el-table-column里加这个 :reserve-selection="true" 

然后方法里用getRowKey (row) { return row.age},这里主要的是age尽量用唯一值代替(row代表每条数据的对象)


完整示例:

<!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) {
						// 请把age换成ID类型的唯一值
					      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>

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Stevengring 0 文章