利用 Vue 和 element 的实现table表格数据的模糊匹配搜索
代码如下：
<template><divclass="dormitory"><divclass="searchWord"><divstyle="display:inline-block">搜索：</div><el-inputv-model="search"style="display:inline-block;width:1300px"placeholder="请输入搜索内容"></el-input></div>//遍历表格<divclass="dormitoryData"><el-tableref="dormitoryTable":data="tables"tooltip-effect="dark"stripestyle="width:100%"><el-table-columntype="selection"width="45"></el-table-column><el-table-columnlabel="序号"type="index"width="65"></el-table-column><el-table-columnlabel="人物"prop="people"></el-table-column><el-table-columnlabel="关系"prop="relationship"></el-table-column><el-table-columnlabel="初见"prop="meet"></el-table-column><el-table-columnlabel="地点"prop="place"></el-table-column><el-table-columnlabel="昵称"prop="execg"></el-table-column><el-table-columnlabel="认识年限"prop="year"></el-table-column><el-table-columnlabel="成名之作"prop="works"></el-table-column></el-table></div></div></template>
<script>exportdefault{data(){return{dormitory:[{people:'雷森',relationship:'大学室友',meet:'2010-09-02',place:'图书馆',execg:'胖子',year:'8年',works:'海阔天空'},{people:'刘利伟',relationship:'大学室友',meet:'2010-09-02',place:'5#633',execg:'老大',year:'8年',works:'勇气'},{people:'李金龙',relationship:'大学室友',meet:'2010-09-02',place:'5#633',execg:'二哥',year:'8年',works:'遇见'},{people:'马康',relationship:'大学室友',meet:'2010-09-02',place:'餐饮大厦',execg:'康哥',year:'8年',works:'不再联系'},{people:'牛光卫',relationship:'大学室友',meet:'2010-09-02',place:'图书馆',execg:'牛牛娃',year:'8年',works:'断点'},{people:'陆兆攀',relationship:'大学室友',meet:'1991-07-27',place:'百浪',execg:'帅哥',year:'27年',works:'不再犹豫'},{people:'小甜',relationship:'亲密的人',meet:'2016-10-05',place:'小寨',execg:'甜甜圈',year:'2年',works:'ForeverLove'}],search:''}},computed:{//模糊搜索tables(){constsearch=this.searchif(search){//filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。//注意：filter()不会对空数组进行检测。//注意：filter()不会改变原始数组。returnthis.dormitory.filter(data=>{//some()方法用于检测数组中的元素是否满足指定条件;//some()方法会依次执行数组的每个元素：//如果有一个元素满足条件，则表达式返回true,剩余的元素不会再执行检测;//如果没有满足条件的元素，则返回false。//注意：some()不会对空数组进行检测。//注意：some()不会改变原始数组。returnObject.keys(data).some(key=>{//indexOf()返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；//该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。returnString(data[key]).toLowerCase().indexOf(search)>-1})})}returnthis.dormitory}},methods:{}}</script>