在Vue.js中使用两个字段组合值作为b表的主键

Question

我想要构造一个包含GitHub回购信息的b表.我以前使用回购id作为主键，但是由于我有许多repos要管理，当来自不同orgs的两个repos具有相同的repo id时，就会发生错误。所以，我想知道是否可以将org id和repo id组合起来，并使用合并的值作为主键？这方面的讨论似乎不多。以下是表当前定义的方式：

      <b-table
        sticky-header="640px"
        striped
        hover
        no-border-collapse
        primary-key="repoid"
        :items="items"
        :filter="filter"
        :fields="fields"
        sort-by="updatedAt"
        :sort-desc="true"
      >

我试图将主键更改为primary-key="orgid" + "-" + "repoid"，但似乎出现了错误。有什么建议吗？提前感谢！

Answer 1

规则一:不要依赖外部值作为主密钥，包括电子邮件地址、身份证号码等。

作为响应，您的技巧不起作用，因为表询问包含主键的字段的名称。我非常清楚，这些项目中没有一个包含一个名为orgid-repoid的字段

作为解决方案，根据需要构建主键。

// where you fetch items, make it
items = items.map((x) => ({
  ...x,
  myOwnedPrimaryKey: `${x.orgid}-${x.repoid}`,
}));

现在，请随意使用您自己的主键。

primary-key="myOwnedPrimaryKey"

Answer 2

您只需使用计算的主键来增加b表项。在这里的片段中，表项来自一个名为keyedItems的计算属性，该属性添加了一个名为thePrimaryKey的道具。为了举例说明，它组合了来自项(first_name)和索引的数据。

要确保它正常工作，请运行代码段，然后使用browser dev工具检查其中的一个表行。B表将其与表的id结合起来，生成in行(在本例中)如下所示：

myTable__row_Dickerson_-_0
myTable__row_Larsen_-_1
...

​

Vue.config.productionTip = false;
Vue.config.devtools = false;

var app = new Vue({
  el: '#app',
  computed: {
    keyedItems() {
      return this.items.map((item, index) => {
        return { ...item, thePrimaryKey: `${item.first_name} - ${index}` };
      })
    }
  },
  data() {
    return {
      // Note `isActive` is left out and will not appear in the rendered table
      fields: ['first_name', 'last_name', 'age'],
      items: [{
          isActive: true,
          age: 40,
          first_name: 'Dickerson',
          last_name: 'Macdonald'
        },
        {
          isActive: false,
          age: 21,
          first_name: 'Larsen',
          last_name: 'Shaw'
        },
        {
          isActive: false,
          age: 89,
          first_name: 'Geneva',
          last_name: 'Wilson'
        },
        {
          isActive: true,
          age: 38,
          first_name: 'Jami',
          last_name: 'Carney'
        }
      ]
    }
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

<div id="app">
  <div>
    <b-table 
      id="myTable"
      primary-key="thePrimaryKey"
      striped 
      hover
      :items="keyedItems"
      :fields="fields" 
    >
    </b-table>
  </div>
</div>

​