如何在引导表-vue中使用主键？

Question

如何在引导表中使用主键？但问题是，有时数据的id字段是0。我要自动的身份分配。

我的数据：

items = [{id:0,name:'Ali'},
         {id:1,name:'Veli'},
         {id:2,name:'Berkay'},
         {id:0,name:'Mehmet'},

        ]

 <b-table
        :items="filteredItems"
        :fields="filteredFields"
        primary-key="id"
        
      />

Answer 1

在这种情况下，您可以迭代items数组，并在每个对象中添加primaryKey属性，这些对象将包含索引。

​

const items = [
  {id:0, name:'Ali'},
  {id:1, name:'Veli'},
  {id:2, name:'Berkay'},
  {id:0, name:'Mehmet'}
];

items.forEach((obj, index) => {
  obj['primaryKey'] = index
});

console.log(items);

​

使用b-data-table 进行演示

​

new Vue({
  el: '#app',
  data: {
    items: [
      {id:0,name:'Ali'},
      {id:1,name:'Veli'},
      {id:2,name:'Berkay'},
      {id:0,name:'Mehmet'}
    ],
    fields: [
      {
        key: 'name',
        label: 'Name'
      }
    ],
  },
  mounted() {
    this.items.forEach((obj, index) => {
      obj['primaryKey'] = index
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.common.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.css"/>
<div id="app">
    <b-table class="mt-4" :items="items" :fields="fields" primary-key="primaryKey"/>
</div>

​