BTable фильтр с функцией - PullRequest
Новая
       10

BTable фильтр с функцией

0 голосов
/ 20 сентября 2018

Я боролся с этим почти 6 часов, но я не нашел способа выполнить то, что мне нужно.

Дело в том, что мне нужно отфильтровать таблицу начальной загрузки с помощьюфункция, но я не могу заставить его работать, есть шаг, который мне нужен, но я не могу его найти.

здесь это jsfiddle, который я беру из Интернета, который имеет простой b-table с фильтром свойств.

https://jsfiddle.net/rothariger/oxbrhcqk/1/

Теперь, если вы проверите этот пример, я заменил свойство для функции, но оно просто вызывается в нагрузке, когда выизмените текстовое поле фильтра, оно ничего не делает, и вот тут я думаю, что пропускаю шаг.

https://jsfiddle.net/rothariger/oxbrhcqk/3/

new Vue({
  el: '#app',
  data: {
    items: [{
      isActive: true,
      age: 40,
      name: {
        first: 'Dickerson',
        last: 'Macdonald'
      }

    }, {
      isActive: false,
      age: 21,
      name: {
        first: 'Larsen',
        last: 'Shaw'
      }

    }, {
      isActive: false,
      age: 9,
      state: 'success',
      name: {
        first: 'Mitzi',
        last: 'Navarro'
      }

    }, {
      isActive: false,
      age: 89,
      name: {
        first: 'Geneva',
        last: 'Wilson'
      }

    }, {
      isActive: true,
      age: 38,
      name: {
        first: 'Jami',
        last: 'Carney'
      }

    }, {
      isActive: false,
      age: 27,
      name: {
        first: 'Essie',
        last: 'Dunlap'
      }

    }, {
      isActive: true,
      age: 40,
      name: {
        first: 'Dickerson',
        last: 'Macdonald'
      }

    }, {
      isActive: false,
      age: 21,
      name: {
        first: 'Larsen',
        last: 'Shaw'
      }

    }, {
      isActive: false,
      age: 26,
      name: {
        first: 'Mitzi',
        last: 'Navarro'
      }

    }, {
      isActive: false,
      age: 22,
      name: {
        first: 'Geneva',
        last: 'Wilson'
      }

    }, {
      isActive: true,
      age: 38,
      name: {
        first: 'Jami',
        last: 'Carney'
      }

    }, {
      isActive: false,
      age: 27,
      name: {
        first: 'Essie',
        last: 'Dunlap'
      }

    }],
    fields: {
      name: {
        label: 'Person Full name',
        sortable: true
      },
      age: {
        label: 'Person age',
        sortable: true
      },
      isActive: {
        label: 'is Active'
      },
      actions: {
        label: 'Actions'
      }
    },
    currentPage: 1,
    perPage: 5,
    filter: null
  },
  methods: {
    details(item) {
      alert(JSON.stringify(item));
    },
    filterGrid(val) {
      console.log(val);
      return true;
    }
  }
})

любая информация о том, что я долженделать?

С уважением.

1 Ответ

0 голосов
/ 20 сентября 2018

Как Vue Bootstrap вводит: ,

Значением фильтра может быть строка, RegExp или ссылка на функцию.Если предоставляется функция, первым аргументом является объект данных записи исходного элемента.Функция должна возвращать true, если запись соответствует вашим критериям, или false, если запись должна быть отфильтрована.

Затем посмотрите исходный код Vue Bootstrap Github , вы получитеfind Vue Bootstrap только вызов вашей функции фильтра внутри одного вычисляемого свойства = computedItems .

Так что для вашего случая:

filterGrid(val) {
  console.log(val);
  return true;
}

Он не вызывает никакой реактивности (print затем всегда возвращает true), поэтому он ничего не будет делать (computed property = computedItems не будет пересчитываться, поэтому функция фильтра будеттакже не выполняется).

, поэтому одна простая функция фильтра с реактивностью будет иметь вид: 

filterGrid(val){
    return !this.filter || JSON.stringify(val).includes(this.filter)
}

Также вы можете задействовать другое свойство data / prop / computed, функция фильтра будет выполненатакже при срабатывании реактивности.

Полная демонстрация : 

new Vue({
  el: '#app',
  data: {
    items: [{
      isActive: true,
      age: 40,
      name: {
        first: 'Dickerson',
        last: 'Macdonald'
      }

    }, {
      isActive: false,
      age: 21,
      name: {
        first: 'Larsen',
        last: 'Shaw'
      }

    }, {
      isActive: false,
      age: 9,
      state: 'success',
      name: {
        first: 'Mitzi',
        last: 'Navarro'
      }

    }, {
      isActive: false,
      age: 89,
      name: {
        first: 'Geneva',
        last: 'Wilson'
      }

    }, {
      isActive: true,
      age: 38,
      name: {
        first: 'Jami',
        last: 'Carney'
      }

    }, {
      isActive: false,
      age: 27,
      name: {
        first: 'Essie',
        last: 'Dunlap'
      }

    }, {
      isActive: true,
      age: 40,
      name: {
        first: 'Dickerson',
        last: 'Macdonald'
      }

    }, {
      isActive: false,
      age: 21,
      name: {
        first: 'Larsen',
        last: 'Shaw'
      }

    }, {
      isActive: false,
      age: 26,
      name: {
        first: 'Mitzi',
        last: 'Navarro'
      }

    }, {
      isActive: false,
      age: 22,
      name: {
        first: 'Geneva',
        last: 'Wilson'
      }

    }, {
      isActive: true,
      age: 38,
      name: {
        first: 'Jami',
        last: 'Carney'
      }

    }, {
      isActive: false,
      age: 27,
      name: {
        first: 'Essie',
        last: 'Dunlap'
      }

    }],
    fields: {
      name: {
        label: 'Person Full name',
        sortable: true
      },
      age: {
        label: 'Person age',
        sortable: true
      },
      isActive: {
        label: 'is Active'
      },
      actions: {
        label: 'Actions'
      }
    },
    currentPage: 1,
    perPage: 5,
    filter: null
  },
  methods: {
    details(item) {
      alert(JSON.stringify(item));
    },
    filterGrid(val){
    	return !this.filter || JSON.stringify(val).includes(this.filter)
    }
  }
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

<!-- Add this after vue.js -->
<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <div class="justify-content-centermy-1 row">

    <b-form-fieldset horizontal label="Rows per page" class="col-6" :label-size="6">
      <b-form-select :options="[{text:5,value:5},{text:10,value:10},{text:15,value:15}]" v-model="perPage">
      </b-form-select>
    </b-form-fieldset>

    <b-form-fieldset horizontal label="Filter" class="col-6" :label-size="2">
      <b-form-input v-model="filter" placeholder="Type to Search"></b-form-input>
    </b-form-fieldset>
  </div>

  <!-- Main table element -->
  <b-table striped hover :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage" :filter="filterGrid">
    <template slot="name" scope="item">
      {{item.value.first}} {{item.value.last}}
    </template>
    <template slot="isActive" scope="item">
      {{item.value?'Yes :)':'No :('}}
    </template>
    <template slot="actions" scope="item">
      <b-btn size="sm" @click="details(item.item)">Details</b-btn>
    </template>
  </b-table>

  <div class="justify-content-center row my-1">
    <b-pagination size="md" :total-rows="this.items.length" :per-page="perPage" v-model="currentPage" />
  </div>
</div>
...