Question

项目特色： - 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
  }
]

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

Answer 1

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

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

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

1 个答案: