英文:
Bootstrap-vue table with column span 2 by using items and fields
问题
我正在使用vuejs2和bootstrap vue进行项目。我被要求制作类似于这样的UI（只是UI的一个想法）：
解释我卡住的部分，我想要实现一个具有跨两列的标题（就像红色部分）并在该标题下放置两个数据项（就像黄色部分）的UI。
根据bootstrap vue的文档，我知道我可以硬编码布局，但由于我必须连接到API，我希望（也必须）使用:item和:fields来做。就像这样：
<b-table
bordered
responsive
class="mt-2"
:fields="tableFields"
:items="tableData"
>
<!--
我如何在这里实现UI
-->
</b-table>
我想问一下，如何使用b-table来实现这个UI？
英文:
I am doing a project with using vuejs2 and bootstrap vue. I was asked to do the ui like this (just an idea of the ui):
Explanation of the part I stuck, I want to achieve a ui that have a header with column span 2 (like red part) and put 2 data under that header (like yellow part)
From the document of bootstrap vue, I know that I can hardcode the layout, but as I have to connect to the api, I wish to use (and have to use) the :item and :fields to do. Just like this:
<b-table
bordered
responsive
class="mt-2"
:fields="tableFields"
:items="tableData"
>
<!--
how can I do the ui in here
-->
</b-table>
I would like to ask how could I achieve the ui with b-table
答案1
得分: 2
对于这个功能，需要使用scoped slots。:items 和 :fields 用于简单的表格渲染。您需要更多的布局控制。
使用 b-table 与 Vue 指令：
<template>
<b-table responsive class="mt-2">
<thead>
<tr>
<th colspan="2">特殊标题</th>
<!-- 其他标题在这里 -->
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in data" :key="index">
<td>{{ item.field1 }}</td>
<td>{{ item.field2 }}</td>
<!-- 其他单元格在这里 -->
</tr>
</tbody>
</b-table>
</template>
<script>
export default {
data() {
return {
data: [
// 您的数据放在这里
]
}
}
}
</script>
这样，您可以自定义表格的布局并更改所需的内容。
希望这有所帮助！🍀
英文:
for this feature, scoped slots needed to be used. :items and :fields are used for simple table rendering. You need more control on the layout.
Use b-table along with vue directives:
<template>
<b-table responsive class="mt-2">
<thead>
<tr>
<th colspan="2">Special Header</th>
<!-- Other headers go here -->
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in data" :key="index">
<td>{{ item.field1 }}</td>
<td>{{ item.field2 }}</td>
<!-- Other cells go here -->
</tr>
</tbody>
</b-table>
</template>
<script>
export default {
data() {
return {
data: [
// Your data goes here
]
}
}
}
</script>
That way, you can customize layout of table indivually and change what you need.
Hope this helps! 🌷
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论