title: VueJS Element vue-data-tables Search box filter with range
body: <p>I am using VueJS 2.0 along with <a href="http://element.eleme.io" rel="nofollow noreferrer">http://element.eleme.io</a> and 
  <a href="https://njleonzhang.github.io/vue-data-tables" rel="nofollow noreferrer">https://njleonzhang.github.io/vue-data-tables</a>. Been trying to figure out how I can do a ranged search (X to Y) with <a href="https://njleonzhang.github.io/vue-data-tables/#/searchBoxFilter" rel="nofollow noreferrer">https://njleonzhang.github.io/vue-data-tables/#/searchBoxFilter</a> but unable to figure it out and could not find any examples. I feel like it can be done with the filterFunction, but unsure. Or maybe just add more text inputs that can take two numbers, and pass those values to the filterFunction? I am not really sure so if anyone has a example on how this is done, I would extremely appreciate it. Below is what I have so far, I removed everything I tried, to not confuse anyone.</p>
  
  <pre><code>&lt;template&gt;
    &lt;data-tables ref="multipleTable" :data="tableData" :pagination-def="paginationDef" :search-def="searchDef" @filtered-data="handleFilteredData"  @selection-change="handleSelectionChange"&gt;
       &lt;el-row slot="custom-tool-bar" style="margin-bottom: 10px"&gt;
        &lt;el-col&gt;
          &lt;el-button @click="hideFilteredData()" type="primary"&gt;Delete Filtered&lt;/el-button&gt;
          &lt;el-button @click="hideSelectionData()" type="primary"&gt;Delete Selected&lt;/el-button&gt;
        &lt;/el-col&gt;
      &lt;/el-row&gt;
         &lt;el-table-column
        type="selection"
        width="55"&gt;
      &lt;/el-table-column&gt;
       &lt;el-table-column prop="id" label="ID" sortable="custom"&gt;
      &lt;/el-table-column&gt;
       &lt;el-table-column prop="title" label="Title" sortable="custom"&gt;
      &lt;/el-table-column&gt;
    &lt;/el-table-column&gt;&lt;/data-tables&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import axios from 'axios'
  export default {
   data() {
    return {
     tableData: [],
     filteredData: [],
     paginationDef: {
      pageSize: 10,
      pageSizes: [10, 20, 50, 100],
     },
     searchDef: {
      props: ['title', 'id']
     },
     multipleSelection: []
    }
   },
   mounted() {
    axios.post('select.py', {
     table: 'master',
     where: [
      {
       hidden: 0,
       deal_website: 'dailysteals'
      }
     ]
    })
    .then(response =&gt; {
     this.tableData = response.data
    })
    .catch(function (error) {
     console.log(error);
    });
   },
   methods: {
    handleFilteredData(filteredData) {
     this.filteredData = filteredData
    },
    hideFilteredData(){
     this.filteredData.forEach(function(item){
      console.log('ID: ' + item.title);
     })
    },
    handleSelectionChange(val) {
     this.multipleSelection = val;
    },
    hideSelectionData(){
     this.multipleSelection.forEach(function(item){
      console.log(item.id)
     })
    }
   }
  }
  &lt;/script&gt;
  </code></pre>