DataTable 在 Vuetify v0.12 中自动重新排序数据答案

【问题标题】：DataTable reorder data automatically in Vuetify v0.12DataTable 在 Vuetify v0.12 中自动重新排序数据
【发布时间】：2018-08-07 14:38:09
【问题描述】：

项目特点： - VueJS - Vuetify v0.12

我有一个从后端获得的 Object Json 已经订购，只是为了在表格中显示它。但是，v-data-table 会自动重新排序 JSON，并且不会显示我想要的顺序。

这是我的组件表中的代码：

<v-data-table :headers="headers" :items="items" :loading="loading" class="elevation-1" hide-actions>
      <template slot="headers" scope="props">
        <span v-if="props.item.value!='actions'">
          {{ props.item.text }}
        </span>
      </template>
      <template slot="items" scope="props">
        <td>
          <span>props.item.value</span>
        </td>
        <td>
          <v-btn floating small class="green darken-2 mt-0" @click.native="onEdit(props.item)">
            <v-icon light>edit</v-icon>
          </v-btn>
        </td>
      </template>
    </v-data-table>


export default {
    props: ['compName', 'headers', 'items', 'pageCount',
      'recordCount', 'loading', 'paginationOpts', 'applyFilters',
      'onAdd', 'onEdit', 'onDelete', 'getAmountPerClient'],
    methods: {
      [...]
    },
    mounted() {
    },
    data() {
      return {
        expanded: false,
        pagination: {},
        gridRowsPerPageItems: process.env.GRIDS_ROWS_PER_PAGE_ITEMS,
        collapsibleFields: {},
      }
    }
  }

我的items 参数的值类似于以下内容::

[
  {
    "id": "93d22f3b-8af8-4920-a828-121ecc0e8abe",
    "name": "Christhian",
    "is_default": false,
    "description": null,
    "reference_code": null
  },
  {
    "id": "167f32c7-0d84-4ec8-b5a4-fffbb42e293f",
    "name": "Client 2",
    "is_default": false,
    "description": null,
    "reference_code": null
  },
  {
    "id": "0ee8f89b-aa5f-45f2-8cfd-5acc94171eba",
    "name": "Client Test",
    "is_default": false,
    "description": null,
    "reference_code": null
  },
  {
    "id": "06e79101-8808-49d4-8b4e-41ec6120ed18",
    "name": "DEFAULT",
    "is_default": false,
    "description": null,
    "reference_code": null
  }
]

但在表格中，此数据已重新排序并以其他顺序显示：

[
  {
    "id": "06e79101-8808-49d4-8b4e-41ec6120ed18",
    "name": "DEFAULT",
    "is_default": false,
    "description": null,
    "reference_code": null
  },
  {
    "id": "0ee8f89b-aa5f-45f2-8cfd-5acc94171eba",
    "name": "Client Test",
    "is_default": false,
    "description": null,
    "reference_code": null
  },
  {
    "id": "167f32c7-0d84-4ec8-b5a4-fffbb42e293f",
    "name": "Client 2",
    "is_default": false,
    "description": null,
    "reference_code": null
  },
  {
    "id": "93d22f3b-8af8-4920-a828-121ecc0e8abe",
    "name": "Christhian",
    "is_default": false,
    "description": null,
    "reference_code": null
  }
]

我不知道为什么它会自动重新排序。我没有排序方法。排序在数据到达数据表之前完成。

【问题讨论】：

不确定您在标题模板中尝试的内容。我已经将其中的一堆复制到了一个 codepen 中，当基于一个 vueitfy 示例时它似乎正在工作。 codepen.io/anon/pen/MQZezm。添加特定代码时，它显示您正在使用item 中未定义的道具，标题模板似乎没有像其他模板一样可用的项目。

标签： vue.js vuetify.js

【解决方案1】：

您可以只使用disable-initial-sort 指令。

<v-data-table disable-initial-sort ... >

【讨论】：