0

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

我在下面发布的代码已经过简化（即删除了分页和计算的东西）以显示我坚持的内容。

表.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
    }
  }
}

主.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)，因此这不是一个疯狂的数据量。

到目前为止，我一直在参考文档。

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

4

1 回答 1

1

如果您的表有一个唯一的 ID 字段（即主键），请通过primary-keyprop 指定该字段键名。这将优化 Vue 重新渲染表格的方式。

即，如果您的 items 数组具有id保证在所有数据行中唯一的字段，则设置 prop primary=key="id"。

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

另一种选择是去抖动你的过滤器输入。与其将过滤器输入的 v-model 直接传递给 b-table 的 prop，不如将其filter存储在中间变量中，并且仅在无按键（输入事件）这么多毫秒后更新发送到 b-table 的输入值的副本.

在您的情况下发生的情况是过滤器进程在整个表格中运行每个输入的字符，这会重新触发 Vue 重新渲染整个表格。结合使用primary-key和输入去抖动应该可以为您提高性能。

于 2019-08-13T04:18:04.667 回答