element-table fuzzy search input match

Effect:

 Implementation ideas:

Define 2 arrays in data, one for assigning the return value of the interface, and one for filtering, and then match when inputting.

code:

<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>

 Note:

The usage of some() method:

1. Detect whether there is an element in the array that meets the specified conditions, return true if it exists, and return false if it does not exist;

2. Check whether all elements in the array do not meet the specified conditions, and return false if none of them meet the specified conditions, and return true if one or more of them meet.

trim method: remove spaces

toLowerCase() : The method is used to convert the string to lowercase.

match(): method retrieves the specified value within a string, or finds a match of one or more regular expressions.

JSON.parse() : String to JSON.

JSON.stringify(): JSON to string.

JSON.parse(JSON.stringify(this.checkOldlist)) Simple deep copy of JSON object.

<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>