我正在尝试使用bootstrap-vue
与vue.js创建一个自定义表,即当我将子对象传递给component子对象时,该prop对象具有定义单元格列的属性和具有渲染功能的属性一段html,我想将其显示为表格中的作用域广告位。
这里的代码:
<template>
<b-table :id="myId" ...otherProps>
<template v-if="customCell"
v-slot:cell(`$(customCell.column)`)="data"
>
<div v-html="customCell.renderChild(data)" />
</template>
</b-table>
<template>
<script>
export default {
props: {
customCell: {
type: Object,
required: false
},
...otherProps
}
}
在父组件中,用于孩子的道具如下:
<template>
<table :custom-cell="customCell" ...otherProps />
<template>
<script>
export default {
data() {
return {
customCell: {
column: "azione",
renderChild: function(data) {
return `<b-button variant="primary" @click="alert('ciao')">Merda</b-button>`;
}
}
}
},
}
我尝试过,但是在子组件上什么也没显示。
请有人帮我吗?