如何将键作为变量传递给 Bootstrap-Vue 表中的模板

Question

表中的作用域字段槽有一个新语法，请参阅https://bootstrap-vue.js.org/docs/components/table#scoped-field-slots，它看起来像

<template v-slot:cell(myColumn)="data">
...

wheremyColumn被解释为字符串 - 字段中的字段键，以显示在我们的表中。

如何使用变量而不是字符串？让我们说一下：

let myColumnName = "myColumn";

<template v-slot:cell(myColumnName)="data">
...

Answer 1

使用v-slotVue 2.6.x的新语法时，可以使用动态插槽名称语法。

<template v-slot:[`cell(${myColumnName})`]="data">

或在变量中设置完整的插槽名称：

let fieldName = 'myColumn'
let slotName = `cell(${fiedlName})`

<template v-slot:[slotName]="data">

方括号之间的任何内容都被解释为 javascript 表达式。请注意，表达式中不能有空格（HTML 属性名称不能有空格）。

上面的第二个例子是使用 DOM 模板时最好的选择。请注意，在使用 DOM 模板时，您的变量名称可能应该小写（浏览器=在解析模板之前将所有内容都小写）。

如果使用单文件组件 (SFC)，则无需担心字母大小写。