Установить параметры фильтра для vue-good-table программно - PullRequest
Новая
       16

Установить параметры фильтра для vue-good-table программно

3 голосов
/ 20 мая 2019

Как можно программно изменить значение, отображаемое в элементах фильтра пользовательского интерфейса (вход, выпадающий список и т. Д.) В vue-good-table?

Например, если я позвоню: this.$set(this.table.columnsFilters, 'name', 'bob')

Я хочу, чтобы значение в поле ввода HTML 'name' отображало bob.

К сожалению, установка значений, как я описал выше, не работает

Ответы [ 2 ]

1 голос
/ 28 мая 2019

Если я правильно понимаю, вы хотите установить фильтр для поля программно ... Как-то так должно работать .. Нажмите кнопку, чтобы изменить фильтр программно ... Если вы измените эту строку на любое допустимое имя, оно будет фильтроваться по этому имени ... Измените 'Bob' на правильное имя ... (как Dan) ... 

<button 
  style="width:200px;" 
  @click.stop="changeFilter('name', 'Bob')"
>Click To Change Name Filter</button>

CodePen Mirror 

const vm = new Vue({
  el: "#app",
  name: "my-component",
  data: {
    columns: [
      {
        label: "Name",
        field: "name",
        filterOptions: {
          enabled: true, // enable filter for this column
          placeholder: "Filter Name", // placeholder for filter input
          filterValue: "", // initial populated value for this filter
          filterDropdownItems: [], // dropdown (with selected values) instead of text input
          filterFn: this.columnFilterFn, //custom filter function that
          trigger: "enter" //only trigger on enter not on keyup
        }
      },
      {
        label: "Age",
        field: "age",
        type: "number"
      },
      {
        label: "Created On",
        field: "createdAt",
        type: "date",
        dateInputFormat: "YYYY-MM-DD",
        dateOutputFormat: "MMM Do YY"
      },
      {
        label: "Percent",
        field: "score",
        type: "percentage"
      }
    ],
    rows: [
      {
        id: 1,
        name: "John",
        age: 20,
        createdAt: "201-10-31:9: 35 am",
        score: 0.03343
      },
      {
        id: 2,
        name: "Jane",
        age: 24,
        createdAt: "2011-10-31",
        score: 0.03343
      },
      {
        id: 3,
        name: "Susan",
        age: 16,
        createdAt: "2011-10-30",
        score: 0.03343
      },
      {
        id: 4,
        name: "Bob",
        age: 55,
        createdAt: "2011-10-11",
        score: 0.03343
      },
      {
        id: 5,
        name: "Dan",
        age: 40,
        createdAt: "2011-10-21",
        score: 0.03343
      },
      {
        id: 6,
        name: "John",
        age: 20,
        createdAt: "2011-10-31",
        score: 0.03343
      }
    ]
  },
  methods: {
    clearFilter(field) {
      try {
        let found = this.columns.find((c) => {
          return c.field == field
        });
        found.filterOptions.filterValue = "";
      } catch {
        alert(`Unable to clear ${field} filter`)
      }
    },
    changeFilter(field, newFilter) {
      let found = this.columns.find((c) => {
        return c.field == field
      });
      if(found) {
        if(found.hasOwnProperty("filterOptions")) {
          if(found.filterOptions.hasOwnProperty("filterValue")) {
            found.filterOptions.filterValue = newFilter;
          } else {
            alert(`Column '${field}' does not have filterValue property!`)
          }          
        } else {
          alert(`Column '${field}' does not have filtering configured!`)
        }
      } else {
        alert(`Field '${field}' does not exist!`)
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-good-table@2.15.3/dist/vue-good-table.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-good-table@2.12.2/dist/vue-good-table.css" rel="stylesheet"/>

<div id="app">
  <div>
    <div style="margin:10px 10px 10px 10px;">
      <button 
        style="width:200px;" 
        @click.stop="changeFilter('name', 'Bob')"
      >Click To Change Name Filter</button>
      <button 
        style="width:200px;" 
        @click.stop="clearFilter('name')"
      >Clear Name Filter</button>
    </div>
    <vue-good-table :columns="columns" :rows="rows" />
  </div>
</div>
0 голосов
/ 23 мая 2019

Vue не может обнаружить нормальные добавления свойств (например, this.myObject.newProperty = 'hi')

Поэтому, используя this.$set(this.table.columnsFilters, 'name', 'bob') вместо вашего кода.

Дополнительная информация о $set

...