Vue 테이블 2 사용자 정의 필터가 작동하지 않습니다.

Question

현재 다른 응용 프로그램의 로깅 데이터를 표시하는 테이블에서 작업 중입니다. 이 표는 아무런 문제가없는 데이터를 보여줍니다.

이제 맞춤 필터가 필요합니다. 'LogType'의 값이 1 (즉, 예외/오류 인 로그) 인 경우이 필터는 빨간색으로 표시된 행을 강조 표시해야합니다. 그러나 설명서에서 읽은 후 작동하도록 사용자 지정 필터를 가져올 수 없었습니다. 그리고 사용자 정의 필터에 대한 다른 게시물, 하나는 수정 프로그램이있는 것 같아 Stackoverflow 찾을 수 있지만 겉으로보기 엔 나를 위해 일한. (예 : Vue Tables 2 - Custom Filters)

Vue 테이블 2에 대한 문서는 실제로 이해할 수없는 것일 수도 있습니다. 그것이 작동하게하는데 필요한 것입니다. (vue-tables-2 - Custom filters Documentation)

필자의 문제는 필터의 버튼을 눌러 활성화해야한다는 것입니다. 필터링 할 데이터가있는 즉시 내 사이트를 시작해야합니다. 그러나 완전히 확신 할 수 없기 때문에 내부에 배치 한 "console.log()"를 실행하여 사용자 정의 필터를 가져올 수 없으므로 반환되는 데이터를 확인할 수 있습니다.

다음 코드는 내 Vue 코드 및 옵션입니다. 시작 부분에서 호출 은 "getErrorLogs (거짓) 방법은 정상적으로 작동 테이블에 공급되는 데이터로 반환하는 AJAX 호출을 호출합니다.

getErrorLogs(false) 

    const ClientTable = VueTables.ClientTable 
    const Event = VueTables.Event 

    Vue.use(ClientTable) 

    vue = new Vue({ 
     el: "#vueErrorLogs", 
     methods: { 
      applyFilter(number) { 
       this.selectedNumber = number; 
       Event.$emit('vue-tables.filter::exceptions', number); 
      } 
     }, 
     data: { 
      numbers: ['0','1'], 
      selectedNumber: '', 
      columns: ['ActionName', 'Message', 'LogTime', 'ID', 'LogType', 'Area', 'ApplicationUser'], 
      data: { 
       tableData: getData() 
      }, 
      options: { 
       headings: { 
        ActionName: 'Action Name', 
        Message: 'View Record', 
        LogTime: 'Log Time', 
        ID: 'ID', 
        LogType: 'Log Type', 
        Area: 'Code Area', 
        ApplicationUser: 'Application User', 
       }, 
       sortable: ['ActionName', 'Message', 'ID', 'LogTime', 'LogType', 'Area', 'ApplicationUser'], 
       filterable: ['ActionName', 'Message', 'ID', 'LogType', 'Area', 'ApplicationUser'], //LogTime is missing since datepicker dosent work 
       perPage: 20, 
       filterByColumn: true, 
       toMomentFormat: true, 
       orderBy: { 
        column: 'LogTime', 
        ascending: false 
       }, 
       customFilters: [{ 
        name: 'exceptions', 
        callback: function (row, query) { 
         console.log("Row: ", row, " Query: ", query) 
         return row.name[0] == query; 
        } 
       }] 
      } 
     } 
    }); 

    function getData() { 
     var data = [{}] 
     return data; 
    } 

내 코드의이 부분은 HTML 코드 VUE 테이블을 보여주는에 사용

<div id="vueErrorLogs"> 
    <v-client-table :columns="columns" :data="data.tableData" :options="options"> 
     <a slot="uri" slot-scope="props" target="_blank" :href="props.row.uri" class="glyphicon glyphicon-eye-open"></a> 
    </v-client-table> 
</div> 

업데이트 1 : 지금까지 나는 V-바인드 사용할 수 없다는 것을 배제 할 수있었습니다 :의 부트 스트랩 클래스를 얻기 위해 태그를 설정하는 클래스를 "성공, 위험 또는 정보"는 내가 원하는대로 할당되었습니다.

업데이트 2 : 부트 스트랩 클래스를 사용하여 TR 태그에 색상을 추가하는 방법에 대한 해결책을 찾았습니다. 단순히 rowClassCallBack 옵션을 사용하고 함수 호출 내에서 확인한 다음 원하는 클래스의 문자열 이름. 같은 : 내 사용자 정의 필터 나던 작품은 그러나 자신의 이름으로

Answer 1

• 사용자 정의 필터는 해당 속성을 변경하지 않는, 행을 필터링하는 데 사용되는 의미 왜

  rowClassCallback: function (row) { 
          if (row.LogType == 1) 
           return 'danger' 
          else 
           return 'default' 
         }, 
  

  나는 아직 모른다 (즉, 행 데이터와 일치하는 tr 클래스 추가 귀하의 경우) @ibanjo 당신이 그것을 작동하지 않는 이유입니다는 사용자 정의 필터를 활성화하는 이벤트를 방출하지 눈치를

• . 당신이 자신을 알아 낸 것처럼 나는 정확히 같은 문제로 어려움을 겪고있어 rowClassCallback