VueJs - 테이블 페이지 표시 및 필터

VueJs - 테이블 페이지 표시 및 필터

사용하고 있다Vue2.js그리고.Element UI골격으로서.얇게 썬 테이블을 필터링 할 수 있으면 좋겠습니다.그러기 위해서, 저는table그리고.filter여기서 문서를 찾을 수 있는 컴포넌트.

상황 OK

테이블이 잘려져 있지 않다.필터를 선택하면 루프가 각 행을 통과하여 열 값이 필터와 동일한지 확인합니다.

상황이 좋지 않다

탁자가 잘려 있다.필터를 선택하면 슬라이스 결과인 각 행을 루프가 통과하여 열 값이 필터와 동일한지 확인합니다.이를 통해 "숨겨진" 값을 필터링하지 않습니다.

조금 https://jsfiddle.net/acm3q6q8/3/을 만들어서 이해하기 쉬워요.

전체 데이터를 작업하는 것이 아니라 슬라이스 버전으로 작업하는 것이기 때문에 이 모든 것이 타당합니다.

데이터 슬라이스로 행을 제외하는 것이 아니라 숨기는 것도 하나의 해결책이 될 수 있는데, 더 좋은 방법이 있을까요?

달성하고 싶은 것

• 에서jsfiddle는 2개의 항목만 표시합니다.
• 를 필터링 합니다.tag태그가 다음과 같은 행만 표시하다Office

실제 결과

다음 행 이후 행은 표시되지 않습니다.tag사무실이 조각난 테이블의 일부가 아니라는 거였어요

예상 결과

필터링을 할 때는 반드시 표시되지 않는 행을 고려하고 싶습니다.

중요한

이것은, 복수의 필터로 정상적으로 동작합니다(즉, 복수의 태그를 선택합니다).

편집

마찬가지로 알파벳 순서로 이름을 정렬하려면 2개의 항목만 표시하면 Albert가 표시되지 않습니다.

처리할 수 있습니다.filter-change테이블 컴포넌트 이벤트(여기에 표시) 및 직접 필터링/필터링합니다.

var Main = {
    data() {
      return {
        numberItemToShow : 4,
        tableData: [...],
        filter: []
      }

    },
    computed : {
      filterData() {
          if (!this.filter.length)
            return this.tableData.slice(0, this.numberItemToShow)
          else
            return this.tableData
              .filter(row => this.filter.includes(row.tag))
              .slice(0, this.numberItemToShow);
      }
    },
    methods: {
      onFilterChange(filters){
        if (filters.tag)
            this.filter = filters.tag;
      }
    }  
}

그리고 템플릿은

<template>
<input v-model="numberItemToShow" placeholder="edit me">
<p>Number of item to display: {{ numberItemToShow }}</p>
  <el-table ref="tab" :data="filterData" border style="width: 100%" @filter-change="onFilterChange">
    <el-table-column prop="name" label="Name"   sortable>
    </el-table-column>
    <el-table-column prop="tag" label="Tag" column-key="tag" :filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]">
      <template scope="scope">
        <el-tag :type="scope.row.tag === 'Home' ? 'primary' : 'success'" close-transition>{{scope.row.tag}}</el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

예.

문제는 슬라이스가 필터링 전에 완료된다는 것입니다.필터는 원래 데이터를 표시해야 하며 행 카운트는 필터링의 일부여야 합니다.

필터는 한 번에 하나의 행을 보기 때문에 일치하는 행을 추적하는 것은 조금 어렵습니다.여기서는 일치하는 행의 카운터를 유지합니다.이 카운터는 첫 번째 행이 데이터일 때 0으로 리셋됩니다.이건 해킹이지만 효과가 있어요.더 좋은 방법이 있을지도 몰라요. 테이블 위젯에 익숙하지 않아서요.

var Main = {
    data() {
      return {
      	numberItemToShow : 4,
        tableData: [{
          name: 'One',
          tag: 'Home'
        }, {
          name: 'Two',
          tag: 'Home'
        }, {
          name: 'Three',
          tag: 'Home'
        }, {
          name: 'Four',
          tag: 'Office'
        }],
        scratchCounter: 0
      }
    },
    methods: {
      filterTag(value, row) {
        const matched = row.tag === value;

        if (row === this.tableData[0]) {
        	this.scratchCounter = 0;
        }
        if (matched) {
        	++this.scratchCounter;
        }
        return this.scratchCounter <= this.numberItemToShow && matched;
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui/lib/theme-default/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<template>
<input v-model="numberItemToShow" placeholder="edit me">
<p>Number of item to display: {{ numberItemToShow }}</p>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="name" label="Name">
    </el-table-column>
    <el-table-column prop="tag" label="Tag" :filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]" :filter-method="filterTag">
      <template scope="scope">
        <el-tag :type="scope.row.tag === 'Home' ? 'primary' : 'success'" close-transition>{{scope.row.tag}}</el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>
</div>

언급URL : https://stackoverflow.com/questions/43457045/vuejs-table-pagination-and-filter