datatable - 如何使用 ssr 分页使可选行在 Vuetify 2.0 数据表上工作？

Question

我希望每个人都好

我正在尝试使 show-select 功能在具有 SSR 分页的 Vuetify 2.0.x 数据表上工作，但一点运气都没有。

到目前为止，我们一直在开发 vuetify 1.5.x，我们改变了，因为它在那里也很麻烦。

这是一个代码笔

我只是使用show-select文档没有进一步具体

Answer 1

您在 v-data-table 中错过了 item-key="unique column name"

这是代码笔 https://codepen.io/manojkmishra/pen/OJMNjzq?editors=1010

模板部分

 <v-app id="inspire">
 <div>
   {{msg}}
  <v-data-table show-select v-model="selected"
    :headers="headers"
    :items="desserts"
    :options.sync="options"
    :items-per-page="5"
    :server-items-length="totalDesserts"
    :loading="loading"
    class="elevation-1"
    item-key="name"
  ></v-data-table>
  </div>
  </v-app>

脚本部分

<script>

export default {
data () {
return { selected: [],
  totalDesserts: 0,
  desserts: [],
  loading: true,
  options: {},
  headers: [
    {
      text: 'Dessert (100g serving)',
      align: 'start',
      sortable: false,
      value: 'name',
    },
    { text: 'Calories', value: 'calories' },
    { text: 'Fat (g)', value: 'fat' },
    { text: 'Carbs (g)', value: 'carbs' },
    { text: 'Protein (g)', value: 'protein' },
    { text: 'Iron (%)', value: 'iron' },
  ],
}
},
watch: {
options: {
  handler () {
    this.getDataFromApi()
      .then(data => {
        this.desserts = data.items
        this.totalDesserts = data.total
      })
  },
  deep: true,
},
},
computed: {
msg() {
  console.log('msg-',this.selected)
  return this.selected
}

}，挂载（）{

this.getDataFromApi()
  .then(data => {
    this.desserts = data.items
    this.totalDesserts = data.total
  })
},
methods: {
getDataFromApi () {
  this.loading = true
  return new Promise((resolve) => {
    const { sortBy, sortDesc, page, itemsPerPage } = this.options

    let items = this.getDesserts()
    const total = items.length

    if (sortBy.length === 1 && sortDesc.length === 1) {
      items = items.sort((a, b) => {
        const sortA = a[sortBy[0]]
        const sortB = b[sortBy[0]]

        if (sortDesc[0]) {
          if (sortA < sortB) return 1
          if (sortA > sortB) return -1
          return 0
        } else {
          if (sortA < sortB) return -1
          if (sortA > sortB) return 1
          return 0
        }
      })
    }

    if (itemsPerPage > 0) {
      items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
    }

    setTimeout(() => {
      this.loading = false
      resolve({
        items,
        total,
      })
    }, 1000)
  })
},
getDesserts () {
  return [
    {
      name: 'Frozen Yogurt',
      calories: 159,
      fat: 6.0,
      carbs: 24,
      protein: 4.0,
      iron: '1%',
    },
    {
      name: 'Ice cream sandwich',
      calories: 237,
      fat: 9.0,
      carbs: 37,
      protein: 4.3,
      iron: '1%',
    },

  ]
},
},
}

</script>