On the problem of Element UI search

  • just came into contact with the problem of Vue, doing table search 
<el-input 
  class="serch-input" 
  placeholder=""  
  suffix-icon="el-icon-search" 
  v-model="search"  
  ref="inputvalue" 
  @change.native="searchTable()">
</el-input>


searchTable() {
    const val = this.$refs.inputvalue.value
    let resultData = this.tableData.filter(data=>{
        if( data.title.indexOf(val) > -1){ 
            return true
        } 
    })
    console.log(resultData)
    this.tableData =  resultData
    this.total = this.tableData.length
}
The code written by
  • is shown above, but now there is a problem with the search.

clipboard.png

    After the
  • search is completed, delete the value in input, and the data of the table remains unchanged. I guess it"s the reason for the this.tableData = resultData assignment, but I don"t know how to change it. Ask for advice.
  • or is there any other good way to implement it?
Javascript
Jun.17,2021

you will modify the source data, and then look it up less and less. table bind this.resultData instead of this.tableData 

<el-table :data="inSearch? searchDatas : tableDatas">

data() {
    return {
        inSearch: false,
        searchDatas: [],
        tableDatas: []
    }
},
methods: {
    searchTable() {
        if (this.search !== "") {
            this.inSearch = true
            this.searchDatas = this.tableDatas.filter(data => data.title.indexOf(val) > -1)
            return
        } 
        this.inSearch = false
        this.searchDatas = []
    }
}

Previous: Vue uses axios to get data, but cannot pass it to data

Next: Linux finishes installing the redis extension. It is shown in PHPinfo, but not in php-m. And use the php command to execute a prompt that the redis class does not exist

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu