我有一個看起來像這樣的 bootstrapvue 表；
這是代碼；
<script>
export default {
data() {
return {
// Note 'isActive' is left out and will not appear in the rendered table
fields: [
{
key: 'last_name',
sortable: true
},
{
key: 'first_name',
sortable: false
},
{
key: 'age',
label: 'Person age',
sortable: true,
// Variant applies to the whole column, including the header and footer
variant: 'danger'
}
],
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>
我想將第三列標題更改Person age為具有上標，使其變為Person age1
不幸的是，這并不像在第三列標題的標簽內使用 HTML 那樣簡單。
我正在使用 vue v2.6 和 BootstrapVue。
uj5u.com熱心網友回復：
#head({key}) 您可以使用提供的slot自定義表頭的標記 (html) ：
<b-table>
<template #head(age)="{ label }">
{{ label }} <sup>1</sup>
</template>
</b-table>
顯然，您可以在其中放置任何內容，包括對該列的過濾器搜索等......它都是動態的，連接到您的組件。
這里有幾個例子：Header and Footer custom rendering via scoped slots。
uj5u.com熱心網友回復：
最簡單和最明顯的解決方案：使用 Unicode 字符 U 00B9，SUPERSCRIPT ONE: 1。在許多情況下，這看起來與等效的 HTML 1相當，并且在通過剪貼板復制時通常會顯得更準確。Unicode 提供所有數字和幾個有用的數學符號，至少與腳注和尾注一樣多。
除此之外，Bootstrap Vue 允許您通過特定于表格的作用域插槽使用 HTML 覆寫特定單元格，這是 Vue 的作用域插槽的一般概念的應用（在Vue 3中也可用）。在 Vue 檔案中，我使用的是簡寫 #head(age)而不是.v-slotv-slot:head(age)
<b-table :items="items" :fields="fields">
<template #head(age)>
Person age<sup>1</sup>
</template>
</b-table>
為了避免在欄位定義和自定義槽中重復“人員年齡”，或者為了更好地利用通用head()和foot()后備來應用于所有頁眉和頁腳單元格，您可以指定一個將采用槽背景關系的識別符號，它被定義為同時包含field和label。這里我用過context，但你可以隨意命名；您也可以使用destructuring，如tao 的回答。
<b-table :items="items" :fields="fields">
<template #head(age)="context">
{{ context.label }}<sup>1</sup>
</template>
</b-table>
fields檔案指出“添加到欄位定義物件的任何其他屬性都將保持不變”，所以我想如果這種情況對您來說很常見，您甚至可以添加一個自定義物件field屬性（例如，note或superscript），然后將其呈現為{{ context.label }}<sup v-if="context.field.note">{{ context.field.note }}</sup>.
uj5u.com熱心網友回復：
感謝@tao 的回答和他提供的鏈接，我想回答我自己的問題。這是對他的回答的輕微修改。
https://bootstrap-vue.org/docs/components/table#header-and-footer-custom-rendering-via-scoped-slots
<b-table>
<template #head(age)="data">
{{ data.label }} <sup>1</sup>
</template>
</b-table>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/443185.html
標籤：javascript Vue.js Vuejs2 引导程序