<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>
详细解决方案
elementui-table表格进行模糊搜索,不改变选中状态
热度:22 发布时间:2023-11-18 07:17:10.0
相关解决方案
- 关于for循环中delete 跟 拼接sql delete table in ()的效率比较?
- table js排序,该如何处理
- jsp页面中加了<table>元素后,页面出现了一大片空白后才出现表格?解决方法
- jsp页面中加了<table>元素后,页面出现了一大片空缺后才出现表格
- Unknown table 'book' in field list
- VS2010 RDLC 报表 表(table) 分页的时候怎么显示表头
- table 点击td剔除整行
- 【误删除了表】SQL 小弟我不小心执行了 drop table 表
- 关于固定表头。(GridView,Table。),该如何解决
- Table 布局怎么改用CSS定位
- sql清空表数据用truncate table 表名处理,若表名是以数字开头,或者完全是数字,这句会报语法异常
- c# 网页采摘 TABLE
- sqltxet能不能这么写成"select *rowid from table"
- 大哥们救上命啊ArgumentException: 列“xxx”不属于表 Table
- 动态添加<table>遇到的有关问题
- table 细边框解决方法
- 要取TextBox里的值插入表, insert into table value(); 括号里应该如何写
- table 嵌套有关问题
- 在类名上这样写是啥[Table(Name = "Product")]解决方法
- html中<table>和<asp:Tabel>有什么不一样啊该如何解决
- da.Fill(ds, startRecord, maxRecords, "table"); 工作原理解决办法
- web TABLE,该如何处理
- JS预览 Table
- 怎么自动补充html中<table>中的宽度和高度
- 关于<table class="Text">
- 执行“Alter table“报出” Syntax error in field definition“异常
- 如何能不让GridView变成<table>
- <table align="center">中的align属性过期了?该如何处理
- HTML用在<table>上的cellpadding、cellspacing在css里对应的是什么解决方案
- 元素"tr"不能嵌套在元素"table"中,该怎么处理