vue-tables-2 서버 측에 범위 필터를 추가하는 방법

vue-tables-2 서버 측에 범위 필터를 추가하는 방법

서버측의 vue-table-2 컴포넌트를 사용하여 DB로부터의 정보를 나타내고 있습니다.이 표에는 숫자 열, 텍스트 열 및 날짜 열이 포함되어 있습니다.

숫자 열의 필터링에 문제가 있습니다.범위 필터링 옵션(>>=,<,<=,=,between 등)을 추가하고 싶습니다.

찾을 수 있는 유일한 문서는 다음과 같습니다.

https://www.npmjs.com/package/vue-tables-2#server-side-filters

서버측 필터

A. 커스텀 사용다음 구문에 따라 필터를 선언하는 Filters 옵션:

custom Filters: ['알파벳', age-range']

B. 클라이언트 컴포넌트와 동일합니다.

하지만 이해가 안 되는 게 몇 가지 있어요

1. 'age-range'는 어디에서 구현됩니까?
2. 각 열의 필터는 어디에 지정해야 합니까?
3. vuex\버스를 사용해야 합니까?

누가 구현 좀 도와주시겠어요?

고마워요.

커스텀 필터는, 패키지의 소비자가 실장하는 외부 필터입니다.단, 슬롯을 사용하여 텍스트필터 대신 테이블에 삽입할 수 있습니다( 참조).Slots참조해 주세요.

필터는 패키지의 외부이므로 이벤트 버스 또는 Vuex를 사용하여 필터가 변경된 시기를 패키지에 알리는 것은 사용자의 책임입니다.

즉, 패키지와 커스텀필터 사이의 인터페이스는 이벤트뿐입니다.패키지에는 이벤트가 언제, 어떤 상황에서 발생하는지 파악하거나 제어할 수 없습니다.수동적으로 변경을 리슨하고 수신한 쿼리를 네이티브 쿼리와 Marge합니다.

예를 들어 다음과 같이 입력합니다.age-range-filter방출하는 컴포넌트changed이벤트, 이벤트, 이벤트, 이벤트, 이벤트, 이벤트,age열 네이티브 텍스트 필터:

<v-server-table ... :columns="['name','age']" :options="tableOptions">
<div slot="filter__age">
    <age-range-filter @changed="filter"></age-range-filter>
</div>
</v-server-table>

vue 인스턴스의 경우

data:{
tableOptions:{
   filterable:['name'] // omit 'age' as it will be replaced by your component
   customFilters:['age-range']
  }
},
methods:{
   filter(query) {
     VueEvent.$emit('age-range', query);
   }
}

언급URL : https://stackoverflow.com/questions/50584307/how-to-add-range-filter-in-vue-tables-2-server-side