njleonzhang / vue-data-tables

A simple, customizable and pageable table with SSR support, based on vue2 and element-ui

Home Page:https://njleonzhang.github.io/vue-data-tables

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Prop gets array issue

robertnicjoo opened this issue · comments

Please follow the issue template, or your issue may be closed automatically.

For bug report, provide the following section

Online reproduce

It is important to provide an online sample to reproduce the issue.

Expected Behavior

Filtering my table by any column that match the input.

Current Behavior

Receiving error.

Steps to Reproduce

//  works
<el-col :span="10">
  <el-select v-model="filters[0].value" placeholder="Filter by Condition" multiple="multiple">
    <el-option label="New" value="new"></el-option>
    <el-option label="Used" value="used"></el-option>
    <el-option label="Refubished" value="refubished"></el-option>
  </el-select>
</el-col>

// doesn't work
<el-col :span="5" :offset="4">
  <el-input v-model="filters[1].value" placeholder="Type to filter"></el-input>
</el-col>

<data-tables class="bg-white shadow-sm" 
        :page-size="pageSize"
        :pagination-props="{ background: true, pageSizes: [5, 10, 20, 50, 100]}"
        :data="products"
        :filters="filters"  //filters
....rest of it></data-tables>
filters: [
  { //works
    value: '',
    prop: 'condition',
  },
  {  //doesn't work
    value: []
  }
],

Result

Invalid prop: type check failed for prop "value". Expected String, Number, got Array 

Detailed Description

Based on this part of documentation. If i don't specify prop in my filter it should go against all props and search in all of them. But it doesn't.

Any suggestion?

For feature request, provide the following section

Motivation / Use Case

Expected Behavior

Other Information

For complex situation, filter function is suggested. The filter is designed too complex 😂

it's not complex situation it's very simple situation in fact it's exactly same as documentation sample code. if it was require separate function i think in document would have used function as well, i think it's mostly a bug rather than complex.

Document says if you don't specify prop it should search in all columns of table, but it doesn't. so most likely a bug.

PS: I've solved my issue by providing prop of all my columns yet not what the documentation said.

@robertnicjoo would you please provide a reproduce link. It works in my sample, https://jsfiddle.net/7Lq59h3j/

The provided demo works correctly.

if I comments the prop.
image

Then the filter can work for every column:

image

image

@njleonzhang yes i have tried it as well and it works in jsfiddle however not in my app, i will dig dipper thanks for your time.