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?
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 = []
    }
}
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bf92ab-3169c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bf92ab-3169c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?