当前位置: 代码迷 >> 综合 >> elementui-table表格进行模糊搜索,不改变选中状态
  详细解决方案

elementui-table表格进行模糊搜索,不改变选中状态

热度:22   发布时间:2023-11-18 07:17:10.0
<template><div class="dormitory"><div class="searchWord"><div style="display: inline-block"> 搜索:</div><el-input v-model="search" style="display: inline-block;width: 1300px" placeholder="请输入搜索内容"></el-input></div>// 遍历表格<div class="dormitoryData"><el-tableref="table":data="tables"tooltip-effect="dark"stripestyle="width: 100%"><el-table-column type="selection" width="45"></el-table-column><el-table-column label="序号"  type="index" width="65"></el-table-column><el-table-column label="人物" prop="people"></el-table-column><el-table-column label="关系" prop="relationship"></el-table-column><el-table-column label="初见" prop="meet"></el-table-column><el-table-column label="地点" prop="place"></el-table-column><el-table-column label="昵称" prop="execg"></el-table-column><el-table-column label="认识年限" prop="year"></el-table-column><el-table-column label="成名之作" prop="works"></el-table-column></el-table></div></div>
</template>
<script>
export default {data () {return {bodyData:[],resData:{code:1,dormitory: [{people: '雷森',relationship: '大学室友',meet: '2010-09-02',place: '图书馆',execg: '胖子',year: '8年',works: '海阔天空',checked:true}, {people: '刘利伟',relationship: '大学室友',meet: '2010-09-02',place: '5#633',execg: '老大',year: '8年',works: '勇气',checked:true},{people: '李金龙',relationship: '大学室友',meet: '2010-09-02',place: '5#633',execg: '二哥',year: '8年',works: '遇见',checked:false}, {people: '马康',relationship: '大学室友',meet: '2010-09-02',place: '餐饮大厦',execg: '康哥',year: '8年',works: '不再联系',checked:false}, {people: '牛光卫',relationship: '大学室友',meet: '2010-09-02',place: '图书馆',execg: '牛牛娃',year: '8年',works: '断点',checked:false}, {people: '陆兆攀',relationship: '大学室友',meet: '1991-07-27',place: '百浪',execg: '帅哥',year: '27年',works: '不再犹豫',checked:false}, {people: '小甜',relationship: '亲密的人',meet: '2016-10-05',place: '小寨',execg: '甜甜圈',year: '2年',works: 'Forever Love',checked:false}],},search: ''}},mounted(){this.getEdit()},computed: {// 模糊搜索tables () {const search = this.searchif (search) {// filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。// 注意: filter() 不会对空数组进行检测。// 注意: filter() 不会改变原始数组。return this.bodyData.filter(data => {// some() 方法用于检测数组中的元素是否满足指定条件;// some() 方法会依次执行数组的每个元素:// 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测;// 如果没有满足条件的元素,则返回false。// 注意: some() 不会对空数组进行检测。// 注意: some() 不会改变原始数组。return Object.keys(data).some(key => {for (const index in this.bodyData) {if (this.bodyData[index].checked) {this.$nextTick(() => {this.$refs.table.toggleRowSelection(this.bodyData[index], true)})}}// indexOf() 返回某个指定的字符在某个字符串中首次出现的位置,如果没有找到就返回-1;// 该方法对大小写敏感!所以之前需要toLowerCase()方法将所有查询到内容变为小写。return String(data[key]).toLowerCase().indexOf(search) > -1})})}for (const index in this.bodyData) {if (this.bodyData[index].checked) {this.$nextTick(() => {this.$refs.table.toggleRowSelection(this.bodyData[index], true)})}}return this.bodyData}},methods: {getEdit(){// 模拟后台返回数据赋值this.bodyData=this.resData.dormitory// 根据数据字段设置选中状态for (const index in this.bodyData) {if (this.bodyData[index].checked) {this.$nextTick(() => {this.$refs.table.toggleRowSelection(this.bodyData[index], true)})}}}}}
</script>

  相关解决方案