Vue 표 2 - 커스텀필터

Vue 표 2 - 커스텀필터

Vue 2.1.8에서 이 https://github.com/matfish2/vue-tables-2을 사용하려고 합니다.

완벽하게 동작하지만 값을 기준으로 일부 필드의 형식을 지정하는 커스텀 필터를 사용해야 합니다.

옵션에는 다음과 같은 것이 있습니다.

customFilters: [
{
  name:'count',
  callback: function(row, query) {
    console.log('see me?'); // Not firing this
    return row.count[0] == query;
}
}
]

문서상으로는 이렇게 하라고 되어 있어요

Using the event bus:

Event.$emit('vue-tables.filter::count', query);

근데 이걸 어디에 둬야 할지 모르겠어요?나는 여러 곳을 시도했다.예를 들어, 나의 공리에서는 성공 콜백은 성공했지만 아무것도 없었다.

이건 기본이고 알아야 하는데 잘 모르겠어요.그 이벤트 버스 직원은 어디에 두는지 알려주시면 정말 좋을 것 같아요!

의사들이 이걸 더 잘 설명할 수 있을 거야이해하기 좀 어렵네요.

당신은 명명된 수출 명명된내보내기를 가져와야 합니다를 가져와야 합니다.Eventvue-tables-2 중에서 그렇게 당신과 당신의 사용자 지정 클릭 처리기의 사용자 지정 이벤트에 기여는 테이블의 eventbus를 가지고 있다.따라서 테이블의 이벤트버스가 있고 커스텀클릭핸들러로 커스텀이벤트를 내보낼 수 있습니다.

데모 게임에서 전 세계 개체에 가능합니다.데모에서는 글로벌 객체에서 사용할 수 있습니다.로 ES6 에서는, 수입 합니다 참조해다음의 문서를과 도움말에서 설명한 ES6에 가져올 것이다.import {ServerTable, ClientTable, Event} from 'vue-tables-2';

아래 또는 이 바이올린에서 알파벳 필터 데모를 봐주세요.

데모는 여기서 볼 수 있는 vue-tables-1 데모 바이올린과 유사합니다.

// Vue.use(VueTables)
const ClientTable = VueTables.ClientTable
const Event = VueTables.Event // import eventbus

console.log(VueTables);
Vue.use(ClientTable)

new Vue({
  el: "#people",
  methods: {
    applyFilter(letter) {
      this.selectedLetter = letter;
      Event.$emit('vue-tables.filter::alphabet', letter);
    }
  },
  data() {
    return {
      letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      selectedLetter: '',
      columns: ['id', 'name', 'age'],
      tableData: [{
        id: 1,
        name: "John",
        age: "20"
      }, {
        id: 2,
        name: "Jane",
        age: "24"
      }, {
        id: 3,
        name: "Susan",
        age: "16"
      }, {
        id: 4,
        name: "Chris",
        age: "55"
      }, {
        id: 5,
        name: "Dan",
        age: "40"
      }],
      options: {
        // see the options API
        customFilters: [{
          name: 'alphabet',
          callback: function(row, query) {
            return row.name[0] == query;
          }
        }]
      }
    }
  }
});

#people {
  text-align: center;
  width: 95%;
  margin: 0 auto;
}
h2 {
  margin-bottom: 30px;
}
th,
td {
  text-align: left;
}
th:nth-child(n+2),
td:nth-child(n+2) {
  text-align: center;
}
thead tr:nth-child(2) th {
  font-weight: normal;
}
.VueTables__sort-icon {
  margin-left: 10px;
}
.VueTables__dropdown-pagination {
  margin-left: 10px;
}
.VueTables__highlight {
  background: yellow;
  font-weight: normal;
}
.VueTables__sortable {
  cursor: pointer;
}
.VueTables__date-filter {
  border: 1px solid #ccc;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
}
.VueTables__filter-placeholder {
  color: #aaa;
}
.VueTables__list-filter {
  width: 120px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-tables-2@1.4.70/dist/vue-tables-2.min.js"></script>
<div id="people">
  <button @click="applyFilter(letter)" class="btn btn-default" v-for="letter in letters" :class="{active: letter==selectedLetter}">
    {{letter}}
  </button>
  <button  class="btn btn-default" @click="applyFilter('')">
  clear
  </button>
  <v-client-table :data="tableData" :columns="columns" :options="options"></v-client-table>
</div>

나는 이 레슨이 나에게 가장 도움이 된다는 것을 알았다.https://github.com/ratiw/vuetable-2-tutorial/wiki/lesson-13

요약:.요약 말이야 당신은이벤트를 내보내야 합니다로 이벤트를 내보내야 합니다.vue-eventsVuex(권장)과 패키지 또는 컴퓨터 속성입니다.Vuex(권장)를 속성을 계산하십시오패키지화하거나 사용하여.당신은을 사용하고 싶다를 이용하고 싶다.:append-params="moreParams"vuetable일 vuetable2의vuetable에vuetable2의 특징인 부가되는에 추가할 것 있는 기능입니다.api-url면수 매기기 값과 함께(이 params에서 별도의).페이지 번호 값(이러한 파라미터에서 제외)과함께 표시됩니다.저는 제가vuetable의 moreParams된 속성을 만든다 Vuex을 이용해요.저는 Vuex를 사용하고 있기 때문에 moreParams를vuetable의 계산된 속성으로 만듭니다. it it를 한다.this.$store.getters.moreParamsVuex 겟터Vuex는 Vuex에 있다.

    computed: {
      moreParams() {
        return this.$store.getters.moreParams
      },
    },

그렇지 않으면 $store.stage.property를 사용할 수 있습니다.moreParams에 대한 워치가 있어 테이블을 새 쿼리로 새로 고칩니다.

    watch: {
      moreParams(newVal, oldVal) {
        this.$nextTick(() => {
          this.$refs.vuetable.refresh()
        })
      },
    },

기본 필터와 페이지당 seletbox를 숨기고 새 필터 'manual_agent'를 정의합니다.

        optionsTable: {
            customFilters: ['manual_agent'],
            filterable: false,
            perPageValues: []
        },

기본 필터와 페이지당 선택 항목 사이에 새 사용자 정의 필터를 추가할 수 있는 '슬롯' 옵션이 없으며 기본 필터도 그다지 적합하지 않기 때문에 숨깁니다.다음 예시는 서버 테이블의 실장용입니다.

커스텀 필터에 글로벌하게 사용되는 방법:

toggleFilter: function(filterName, $event) {
                this.$refs.serverTableRef.setPage(1);
                setTimeout(function () {
                    let searchItem = '';
                    if (typeof $event === 'string') { searchItem = $event; } else { searchItem = $event.target.value; }
                    let table = this.$refs.serverTableRef;
                    table.customQueries[filterName] = searchItem;
                    table.getData();
                }.bind(this), 1000);
            }

이렇게 하려면 다음과 같이 v-server 테이블에 ref 이름을 정의해야 합니다.

<v-server-table ref="serverTableRef"

이제 템플릿에서 새 사용자 지정 선택 상자 필터(v-model은 데이터에 정의된 사용자 지정 변수만 가리킴)

<select name="typeoftrip" v-model="agentFilter" @change="toggleFilter('manual_agent', agentFilter)">

또한 비활성화 시 손실된 기본 필터를 대체할 사용자 지정 필터입니다. ('쿼리' 이름을 사용하므로 동일한 이름을 사용합니다.)

<input name="typeoftrip" v-model="mainQuery" v-on:keyup="toggleFilter('query', mainQuery)">

또한 페이지당 델만의 새로운 커스텀 셀렉트

            <select v-model="limitFilter"  @change="$refs.serverTableRef.setLimit($event.target.value)" >
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
            </select>

연주하고 싶은 사람을 위해 바이올린을 업데이트했습니다.중첩된 단일 페이지 구성요소에서 작동하는 방법을 아직 잘 모르겠습니다.

customFilters: [{
  name: 'alphabet',
  callback: function(row, query) {
    return row.name[0] == query;
  }
}]

언급URL : https://stackoverflow.com/questions/41779403/vue-tables-2-custom-filters