Vue Material 网格：加载页面时如何 select 默认情况下第一个出现的行？

Question

正如我在 Q-title 中提到的，我使用从后端获取的数据从 Vue Material Table md-table 构建了一个数据 table并按特定列排序。

现在在前端，我希望在加载页面时自动 select 编辑顶部（第一）行（已排序的行）。 Vue-Datatable代码如下：

<div :loading="loading" class="locations-table" v-if="locations">
    <md-table v-model="locations" md-card @md-selected="onChoose">
        <md-table-row slot="md-table-row" slot-scope="{ item, index }" md-selectable="single" md-auto-select>
            <md-table-cell md-label="City" md-sort-by="city">{{ item.city }}</md-table-cell>
            <md-table-cell md-label="State" md-sort-by="state">{{ item.state }}</md-table-cell>
            <md-table-cell md-label="Zip" md-sort-by="zip">{{ item.zip }}</md-table-cell>
            <md-table-cell md-label="Population" md-sort-by="population">{{ item.population }}</md-table-cell>
        </md-table-row>
    </md-table>
</div>

如何在加载页面时自动 select 此 table 的第一行？

我愿意接受 created 或 mounted 等钩子更改，但更愿意使用 md-selected-value.sync 或 md-selected-value 等属性，以便我可以分配index 具有某些条件的值，例如 md-selected-value="index === 0"。像我刚才提到的那样可能吗？

我提到了 this documentation，但它没有帮助，他们指定 md-selected-value.sync 用于设置 selected 值（在本例中为行）的 prop/attribute 没有没用。

Answer 1

您可以尝试从 locations 数组 :md-selected-value="locations[0]"

传递第一个索引

Vue.use(VueMaterial.default)

new Vue({
  el: '#app',
  data() {
    return {
      loading: false,
      locations: [{city: 'aaa', state: 'aa', zip: '22', population: 55}, {city: 'bbb', state: 'bb', zip: '33', population: 66}, {city: 'ccc', state: 'cc', zip: '44', population: 77}],
      selected: {}
    }
  },
  methods: {
    onChoose(item) {
      this.selected = item
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css">
<div id="app">
  <div :loading="loading" class="locations-table" v-if="locations">
    <md-table v-model="locations" md-card @md-selected="onChoose" :md-selected-value="locations[0]">
      <md-table-row slot="md-table-row" slot-scope="{ item, index }" md-selectable="single" md-auto-select>
        <md-table-cell md-label="City" md-sort-by="city">{{ item.city }}</md-table-cell>
        <md-table-cell md-label="State" md-sort-by="state">{{ item.state }}</md-table-cell>
        <md-table-cell md-label="Zip" md-sort-by="zip">{{ item.zip }}</md-table-cell>
        <md-table-cell md-label="Population" md-sort-by="population">{{ item.population }}</md-table-cell>
      </md-table-row>
    </md-table>
    {{selected}}
  </div>
</div>
<script src="https://unpkg.com/vue-material"></script>

Vue Material 网格：加载页面时如何 select 默认情况下第一个出现的行？

Vue Material Grid: How do I select the first occurring row by default when the page is loaded?

vue-component

vuejs2

vue-material

vue-data-tables