BootstrapVue表中的自定义列

Question

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

my array with items看起来像这样:

[{
id: 1
name: "Test",
phone: [phone],
address: "Some address",
//etc...
}]

这里我有两个问题，

对于第一个，如何设置自定义列名而不是在上面的对象?b-table现在，在对象中获得列名，因为我使用:items=myArray?如何设置自定义列名称?

，其次，我不想在列中显示所有数据，在我的对象中，如何在表中仅显示name和address，而不是显示所有数据?

和第三，如何添加另一个自定义列与e.q.图标，而不是值从对象?

谢谢你的帮助

Answer 1

您需要使用fieldsprop，并提供您想要显示的字段对象数组。key将决定它从对象的哪个属性中获取数据，label将显示在标题中。您还可以在这里添加虚拟字段，使用对象中不存在的key。然后，您可以使用插槽在该列中显示一些自定义数据。

如果你需要更多的信息，这里有一些参考文档。

字段ref: 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>