鍍金池/ 問答/HTML/ 關(guān)于 Element UI 搜索的問題

關(guān)于 Element UI 搜索的問題

  • 剛接觸Vue，在做表格搜索的問題
<el-input 
  class="serch-input" 
  placeholder="請輸入標(biāo)題"  
  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
}
  • 寫的代碼如上所示，但是現(xiàn)在搜索會出現(xiàn)問題。

clipboard.png

  • 搜索完成后，再 刪改input 里的值，表格的數(shù)據(jù)不變。我猜是 this.tableData = resultData 賦值的原因，但是不知道怎么改？求教。
  • 或者有沒有其他好的實(shí)現(xiàn)方式？
回答
編輯回答
青瓷

你這樣會修改源數(shù)據(jù)，然后越查越少。table綁定this.resultData而不是this.tableData

2017年4月11日 23:32
編輯回答
雅痞
<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 = []
    }
}
2017年3月27日 06:52