【问题标题】:Vue : How to implement Table searchVue:如何实现表格搜索
【发布时间】:2018-06-21 13:39:31
【问题描述】:

我在桌子上有一个简单的搜索功能。 但不知何故,它不起作用,

我应该在搜索时在表格中获得过滤的行

以下是代码:

// Search Input
 <div class="dv-header-search">
    <input type="text" class="dv-header-input"
      placeholder="Search"
      v-model="query.search_input">
  </div>

//Table row
<tr v-for="row in filteredRow">
    <td v-for="(value, key) in row">{{value}}</td>
</tr>

data() {
  return {
    model: { data: [] },
    columns: {},
    query: {
      search_input: ''
    },
  }
},

// Setting model after API call
.then(function(response) {
    Vue.set(vm.$data, 'model', response.data.model)
})

computed: {
  filteredRow: function(){
    return this.model.data.filter((row) => {
      return row;
    });
  }
}

现在filteredRow 调用page load,我在这里缺少什么。

【问题讨论】:

    标签: javascript arrays object search vue.js


    【解决方案1】:
    ```
      filteredRow: function(){
        return this.model.data.filter((row) => {
          return row;
        });
      }
    ```
    
    should be 
    
    ```
      filteredRow: function(){
        return this.model.data.filter((row) => {
          // containOrNot should return bool
          return containOrNot(row, this.query.search_input)
        });
      }
    ```
    

    【讨论】:

    • ContainOrNot 将是方法中定义的函数吗?
    • 是的。类似containOrNot (row, search_input) { if (row.indexOf(search_string) !== -1) { return false } else {return true }}
    • rowindexOf 未定义。
    • 对不起row.indexof()
    【解决方案2】:
    filteredRow: function(){
        return this.model.data.filter((row) => {
         //i don't know you value key.. so just picking first property
         for(var key in row){
            return String(row[key]).indexOf(this.query.search_input);
           }
        });
      }
    

    【讨论】:

    • 感谢 sunil,这更有意义。我收到row[key].indexOf is not a function
    • 那么 row[key] 的值是什么类型的?
    • 它们是字符串和数字,我 console.log(typeof row[key]); 它给了我字符串和数字。 `
    • this.model.data 一个包含键值对对象的数组。
    • 我已更改代码以转换为字符串并进行搜索。希望对您有用
    猜你喜欢
    • 2023-03-27
    • 2018-09-24
    • 1970-01-01
    • 2012-09-15
    • 2019-05-10
    • 1970-01-01
    • 1970-01-01
    • 2012-09-08
    • 1970-01-01
    相关资源
    最近更新 更多