vue를 사용하여 테이블 행 필터링

vue를 사용하여 테이블 행 필터링

나는 vuejs를 처음 본다.여기 테이블이 있어:

<table>
 <thead>
    <tr
      v-for="(items, index) in data"
      v-if="index == 0">
      <td v-for="(item, key) in items">
        {{ key }}
      </td>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(items, index) in filteredData">
      <td v-for="item in items">
        {{ item }}
      </td>
    </tr>
  </tbody>
</table>

행을 필터링하여 이 입력에 있는 모든 행과 일치하는 행을 표시하려는 경우:

<input
  type="text"
  placeholder="Search something..."
  v-model="searchQuery">

나는 이것을 계산된 재산으로 성공적으로 해냈다.

computed: {
  filteredData: function() {
    return this.data.filter((items) => {
      for (var item in items) {
        if(String(items[item]).indexOf(this.searchQuery) !== -1) {
          return true
        }
      }
      return false
    })
  }
},

이것은 테이블을 필터링하고 입력에 있는 것과 일치하는 셀이 있는 행만 표시한다.이것은 완벽하게 작동한다.

그러나 이제는 셀이 입력에 있는 것과 일치하고 선택 태그에서 선택한 열을 통해서만 검색하는 행만 필터링하고 표시하려고 하는데, 이 행은 아래에서 만든 것이다.

<select
  id="columnsSelect"
  v-model="selected">
  <option
    v-for="column in columns"
    :value="column">
    {{ column }}
  </option>
</select>

나는 내가 이치에 맞기를 바란다.나는 여기서 어떻게 진행해야 할지 모르겠다.쿠키와 도움을 준 모든 사람에게 큰 감사!

계산된 속성을 사용하여 필터링하면 올바른 경로에 있으므로 이제 선택한 열을 기준으로 행을 필터링하는 논리를 추가하면 된다.예를 들면 다음과 같다.

new Vue({
  el: '#app',
  data: () => ({
    search: null,
    column: null,
    items: []
  }),
  beforeMount () {
    this.items = Array.from(Array(20), (x,i) => {
      return {
        id: i,
        name: Math.random().toString(36).substring(7),
        title: Math.random().toString(36).substring(7),
        description: Math.random().toString(36).substring(7)
      }
    })
  },
  computed: {
    cols () {
      return this.items.length >= 1 ? Object.keys(this.items[0]) : []
    },
    rows () {
      if (!this.items.length) {
        return []
      }
      
      return this.items.filter(item => {
        let props = (this.search && this.column) ? [item[this.column]] : Object.values(item)
        
        
        return props.some(prop => !this.search || ((typeof prop === 'string') ? prop.includes(this.search) : prop.toString(10).includes(this.search)))
      })
    }
  }
})

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#app {
  width: 20rem;
}

#app > div {
  display: flex;
  flex-direction: row;
}

select, input {
  width: 50%;
}

table {
  width: 100%;
  border: 1px solid black;
  text-align: center;
  border-spacing: 0;
}

td {
  border-top: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
  <select v-model="column">
    <option :value="null">No Column Filter</option>
    <option v-for="col in cols" :key="col">{{ col }}</option>
  </select>
  <input type="text" v-model="search" placeholder="Search">
  </div>
  <table>
    <thead>
      <tr>
        <th v-for="col in cols" :key="col">{{ col }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td v-for="col in cols" :key="col">{{ row[col] }}</td>
      </tr>
    </tbody>
  </table>
</div>

참조URL: https://stackoverflow.com/questions/54393321/filter-table-rows-with-vue