如何在bootsrtap vue表上自定义v插槽

时间:2020-01-03 10:03:43

标签: vue.js bootstrap-vue

我正在尝试使用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>`;
       }
     }
   }
 },
}

我尝试过,但是在子组件上什么也没显示。

请有人帮我吗?

0 个答案:

没有答案