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>
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!