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>