![](/img/trans.png)
[英]How to add href to react-bootstrap-table column dynamically?
[英]How to dynamically add a column to Bootstrap Vue Table
我正在使用 Bootstrap Vue並希望動態添加一列或僅在數據中滿足某些條件時才顯示該列。 我正在嘗試了解作用域插槽以及這是否是我應該使用格式化程序回調函數的方向。 理想情況下,只有在數據中可用時,我才想添加列“版本 2”。 我不知道從哪里開始。
代碼
<b-table striped responsive hover :items="episodes" :fields="fields" :filter="filter">
<template v-slot:cell(version_1)="data">
<a :href="`${data.value.replace(/[^a-z]-/i,'-').toLowerCase()}`">Definition</a>
</template>
</b-table>
</template>
<script>
data() {
return {
fields: [{
key: 'category',
sortable: true
},
{
key: 'episode_name',
sortable: true
},
{
key: 'episode_acronym',
sortable: true
},
{
key: 'version_1',
sortable: true
}
],
episodes: [],
versions: [],
}
},
mounted() {
return Promise.all([
// fetch the owner of the blog
client.getEntries({
content_type: 'entryEpisodeDefinitions',
select: 'fields.title,fields.category,fields.slug,fields.episodeAcronym,fields.version,sys.id'
})
])
.then(response => {
// console.info(response[0].items);
return response[0].items
})
.then((response) => {
this.episodes = response.reduce(function( result, item){
if ( item.fields.version === 1 ) {
return result.concat({
category: item.fields.category,
episode_name: item.fields.title,
episode_acronym: item.fields.episodeAcronym,
version_1: 'episodes/' + item.fields.slug + '/' + item.sys.id,
})
}
return result
}, [])
this.versions = response.reduce(function( result, item){
if ( item.fields.version === 2 ) {
return result.concat({
version_2: 'episodes/' + item.fields.slug + '/' + item.sys.id,
})
}
return result
}, [])
console.info(response);
})
.catch(console.error)
},
</script>
我認為這是您正在尋找的東西:
<b-table :items="items" :fields="fields">
<template v-for="field in dynamicFields" v-slot:[`cell(${field.key})`]="{ item }">
</b-table>
在腳本中:
this.dynamicFields.push({key: 'someTestKey', label: 'Dynamic Label'})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.