Question

我有一个vue页面（Main.vue），该页面从单独的vue文件（Table.Vue）呈现一个组件。当我将所有逻辑纳入Main.vue时，自由格式的文本过滤器工作正常。但是现在它几乎落在我键入的每个字符上，因此我认为我的实现可能有问题。

我在下面发布的代码已简化（即删除了分页和计算的内容），以显示我遇到的问题。

Table.vue：

  <!-- search bar -->
  <b-input-group>
    <b-form-input v-model="filter" type="search" placeholder="Type to Search"></b-form-input>
    <b-input-group-append>
      <b-button :disabled="!filter" @click="filter = ''">Clear</b-button>
    </b-input-group-append>
  </b-input-group>

  <b-table 
    :items="details" 
    :fields="fields" 
    :filter="filter"
    :current-page="currentPage"
    :per-page="perPage"
    @filtered="onFiltered"
  >
</b-container>

<script>

export default {
  name: 'Table',
  props: ['details'],
  data: function() {
    return {
      fields: [
        { key: 'ticket_number', sortable: true },
        { key: 'parent_id', label: 'Parent Ticket', sortable: true },
        { key: 'start', sortable: true, label: 'Start Date', formatter: (value) => { return moment(value, 'X').format('MM/DD/YYYY hh:mm:ss A') }},
  ],
  // free text filter
  filter: null
  }
},
  computed: {
  rows: function(){
    return this.details.length
  }
},
created: function () {
  this.filteredDetails = this.details
},
methods: {
  onFiltered(filteredItems) {
    // Trigger pagination to update the number of buttons/pages due to filtering
    this.totalRows = filteredItems.length
    this.currentPage = 1
    }
  }
}

Main.vue：

<template>
  <div v-if="details !== null">
      <custtable :details="filteredDetails"/>
      <br/>
  </div>
</template>

<script>

import { API } from '@/common/api.js'
import Table from '@/components/Table'

export default {
    name: 'Main',
    data: function() {
        return {
            details: [],
            filteredDetails: []
        }
    },
    components: {
        'custtable': Table
    }
}

</script>

所以我想知道过滤器部分是否应该在Table.vue中：它应该在Main.vue中吗？ filter变量的理想位置是哪里？

如上所述，该功能已经存在，但似乎非常缓慢。最初的API调用通常返回大约150个条目（JSON），因此这不是一个疯狂的数据量。

到目前为止，我一直在引用the docs。

任何和所有的输入表示赞赏。

Answer 1

如果表具有唯一的ID字段（即主键），请通过primary-key属性指定该字段的键名。这将优化Vue重新呈现表格的方式。

即如果您的项数组中的字段id保证在所有数据行中都是唯一的，则设置属性primary=key="id"。

过滤还需要将每一行的数据序列化为所有行值的单个字符串，因此，如果有很多字段（或深层嵌套字段），可能会花费一些时间。

另一个选择是消除过滤器输入。与其将过滤器输入的v模型直接传递到b表的filter道具，而不是将其存储在中间变量中，仅在经过数毫秒的否之后才更新发送到b表的输入值的副本。按键（输入事件）。

您遇到的情况是，筛选过程正在整个表中运行，每个输入的字符都在运行，这将重新触发Vue以重新呈现整个表。结合使用primary-key和输入去抖动，可以为您提高性能。

使用内置过滤器的Vue.js b表子组件：有效但非常缓慢

1 个答案: