BootstrapVue 表中的自定义列答案

【问题标题】：Custom columns in BootstrapVue tableBootstrapVue 表中的自定义列
【发布时间】：2021-05-12 09:38:06
【问题描述】：

bootstrap-vue 中的 b-table 组件有问题，

我的包含项目的数组如下所示：

[{
    id: 1
    name: "Test",
    phone: 555-111-666,
    address: "Some address",
    //etc...

}]

这里我有两个问题，

首先，如何在上面的对象中设置自定义列名而不是 this？ b-table 现在，因为我使用 :items=myArray，所以获取对象中的列名？如何设置自定义列名？

第二个，我不想在列中显示我的对象中的所有数据，如何仅在表格中显示 name 和 address 而不是显示所有数据？

第三，如何使用 e.q 添加另一个自定义列。图标而不是对象的值？

感谢您的帮助

【问题讨论】：

标签： javascript html css vue.js bootstrap-4

【解决方案1】：

您需要使用 fields 属性，并提供要显示的字段对象数组。 key 将确定它从对象的哪个属性获取数据，label 将是标题中显示的内容。您还可以在此处添加虚拟字段，其中 key 在您的对象中不存在。然后，您可以使用槽在该列中显示一些自定义数据。

如果您需要更多信息，请参考文档中的一些参考。

字段参考：https://bootstrap-vue.org/docs/components/table#fields-column-definitions

自定义数据：https://bootstrap-vue.org/docs/components/table#custom-data-rendering

new Vue({
  el: "#app",
  data() {
    return {
      items: [{
          id: 1,
          name: "Test 1",
          phone: "111-222-333",
          address: "Some address"
        },
        {
          id: 2,
          name: "Test 2",
          phone: "444-555-666",
          address: "Another address"
        },
        {
          id: 3,
          name: "Test 3",
          phone: "777-888-999",
          address: "Questionable address"
        }
      ],
      fields: [{
          key: "name",
          label: "Full Name"
        },
        {
          key: "address",
          label: "User Address"
        },
        {
          key: "custom_column",
          label: "Custom Column"
        }
      ]
    };
  }
});

<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@2.21.2/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue-icons.js"></script>

<div id="app">
  <b-table :items="items" :fields="fields">
    <template #cell(custom_column)>
      <b-icon icon="question-circle"></b-icon>
    </template>
  </b-table>
</div>

【讨论】：