Question

我正在使用VueJS 2.0以及http://element.eleme.io和 https://njleonzhang.github.io/vue-data-tables。一直试图弄清楚我如何使用https://njleonzhang.github.io/vue-data-tables/#/searchBoxFilter进行远程搜索（X到Y），但无法弄清楚，也无法找到任何示例。我觉得可以使用filterFunction完成，但不确定。或者只是添加更多可以带两个数字的文本输入，并将这些值传递给filterFunction？我不是很确定如果有人有关于如何做到这一点的例子，我将非常感激。以下是我到目前为止所做的一切，我删除了所有尝试的内容，以免混淆任何人。

<template>
  <data-tables ref="multipleTable" :data="tableData" :pagination-def="paginationDef" :search-def="searchDef" @filtered-data="handleFilteredData"  @selection-change="handleSelectionChange">
     <el-row slot="custom-tool-bar" style="margin-bottom: 10px">
      <el-col>
        <el-button @click="hideFilteredData()" type="primary">Delete Filtered</el-button>
        <el-button @click="hideSelectionData()" type="primary">Delete Selected</el-button>
      </el-col>
    </el-row>
       <el-table-column
      type="selection"
      width="55">
    </el-table-column>
     <el-table-column prop="id" label="ID" sortable="custom">
    </el-table-column>
     <el-table-column prop="title" label="Title" sortable="custom">
    </el-table-column>
  </el-table-column></data-tables>
</template>
<script>
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 => {
   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)
   })
  }
 }
}
</script>

VueJS元素vue-data-tables范围为

0 个答案: