基于 Javascript 中的标签过滤表

发布于07月21日

So I am trying to filter my table (element plus table) based on the tags that user clicks. (I am working in a Vue project)

我编写了一个方法，输出包含用户单击的标记的所有行.

<el-table-column prop="Keyword" label="Keyword" width="200" ">
      <template #default="scope" >
      <el-tag v-for="(k,index) in (scope.row.Keyword.split(','))" :key="index" @click="handlekey(k)">{{k}} </el-tag>
      </template>    
</el-table-column>

handlekey(val){          
return this.data.filter((item)=>{return item.Keyword.split(',').includes(val)} )     
}

When user clicks on a tag the console output is

现在，我try 过滤表，因此当用户单击标记时，表仅显示包含该标记的行.

我还try 通过以下方式更改原始数据

如果有人能给我一些建议，告诉我如何做到这一点，我将不胜感激.

推荐答案

您需要一个computed(派生状态)，它返回包含当前活动关键字之一(如果有)的所有行，或者如果没有活动关键字，则返回所有行.

不是将行馈送到表中，而是将计算结果馈送到表中.

What's special about computed is they get recalculated every time the state involved in computing them changes.
Computed never mutate state. Picture a computed as a lens through which you see the state, but you can't actually touch it. If you mutate the source data inside a computed, you will trigger another computing of itself, ending up in an endless loop.

在下例中，计算出的renderedRows将在以下情况下重新计算:

rows更改
(选定)keywords更改

以下是示例:

Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
  el: '#app',
  data: () => ({
    rows: [
      {
        name: '1-5',
        keywords: 'one,two,three,four,five'
      },
      {
        name: '6-10',
        keywords: 'six,seven,eight,nine,ten'
      },
      {
        name: '2n + 1',
        keywords: 'one,three,five,seven,nine'
      },
      {
        name: '2n',
        keywords: 'two,four,six,eight,ten'
      },
      {
        name: '3n + 1',
        keywords: 'one,four,seven,ten'
      },
      {
        name: '5n + 2',
        keywords: 'two,seven'
      }
    ],
    keywords: []
  }),
  computed: {
    renderedRows() {
      return this.keywords.length
        ? this.rows.filter((row) =>
            this.keywords.some((kw) => row.keywords.split(',').includes(kw))
          )
        : this.rows
    },
    allKeywords() {
      return [
        ...new Set(this.rows.map((row) => row.keywords.split(',')).flat())
      ]
    }
  },
  methods: {
    toggleKeyword(k) {
      this.keywords = this.keywords.includes(k)
        ? this.keywords.filter((kw) => kw !== k)
        : [...this.keywords, k]
    }
  }
})

td {
  padding: 3px 7px;
}

button {
  cursor: pointer;
  margin: 0 2px;
}

button.active {
  background-color: #666;
  color: white;
  border-radius: 3px;
}

button.active:hover {
  background-color: #444;
}

<script src="https://unpkg.com/vue@2"></script>
<div id="app">
  <h4>Keywords:</h4>
  <div>
    <button
      v-for="key in allKeywords"
      :key="key"
      v-text="key"
      :class="{ active: keywords.includes(key) }"
      @click="toggleKeyword(key)"
    />
  </div>
  <h4>Rows:</h4>
  <table>
    <thead>
      <th>Name</th>
      <th>Keywords</th>
    </thead>
    <tbody>
      <tr v-for="row in renderedRows" :key="row.name">
        <td v-text="row.name" />
        <td>
          <button
            v-for="key in row.keywords.split(',')"
            :key="key"
            v-text="key"
            :class="{ active: keywords.includes(key) }"
            @click="toggleKeyword(key)"
          />
        </td>
      </tr>
    </tbody>
  </table>
</div>

Note:在runnable minimal reproducible example on codesandbox中提供您所拥有的.io或类似文件，我将对其进行修改，以包括上述原则.