element-table模糊搜索input匹配

效果：

 实现思路：

在data定义2个数组，一个为接口返回值赋值，一个为进行筛选的数组，然后在input输入时进行匹配。

代码：

<el-input v-model="searchContent" size="medium" placeholder="请输入姓名" @input="selectTable"></el-input>
<el-table :data="checklist" border stripe class="mt20" :height="modalTableHeight" >
        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="onarrange(scope.row)" size="mini">安排</el-button>
          </template>
        </el-table-column>
 </el-table>

 注：

some()方法的用法：

1、检测数组中是否存在符合指定条件的元素，存在就返回true，不存在就返回false；

2、检测数组中的所有元素是否都不符合指定条件，都不符合返回false，有一个或者多个符合返回true。

trim方法：去空格

toLowerCase() ：方法用于把字符串转换为小写。

match()：方法 可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

JSON.parse() ：  字符串转JSON。

JSON.stringify()：  JSON转字符串。

JSON.parse(JSON.stringify(this.checkOldlist))  简单的JSON对象深拷贝。

<script>
export default {
  data() {
    return {
      checklist:[],//筛选值
      checkOldlist:[],//总数据
      searchContent:'',
    };
  },
  methods: {
    selectTable(e){
      let oldArr=JSON.parse(JSON.stringify(this.checkOldlist))
      let arr;
      if(e.trim()){
        arr=oldArr.filter((item)=>{
          return Object.keys(item).some((key)=>{
                //key属于全值匹配，如果有针对性的key可以相对替换
            return String(item[key]).toLowerCase().match(e.trim())
          })
        })
      }else{
        arr=this.checkOldlist;
      }
      this.checklist=arr;
    },
  }
};
</script>