V表示带模板

Question

我正在使用vue引导程序。我尝试创建一个动态的网格组件来获取标题和数据。由于我们不知道有多少列传递给组件，因此我们应该检查传递的每个项。

<template>
<b-table striped hover :items="items"></b-table>
<div v-for="title in items">
<template slot="title.key" slot-scope="data">
<input v-if="title.isActive" type="text" v-model="data.value">
<textarea v-else type="text" v-model="data.value"></textarea>
</template>
</div>
</b-table>
</template>
<script>
const items =[
{'label': 'Description', 'key': 'description'},
{'label': 'Name',  'key': 'name', 'isActive': true},
]

因此，如果isActive为true，那么这个模板应该是textarea(列应该用textarea而不是input更改(。但是它不起作用，没有列更改inputbox和textarea，并保持默认模板

你能帮我解决这些问题吗。

谢谢

Answer 1

我认为应该将v-for和slot-scope变量中的title分开以避免混淆：

<template v-for="title in items" :key="title.key">
<template :slot="title.key" slot-scope="item">
<input v-if="item.isActive" type="text" v-model="item.value">
<textarea v-else type="text" v-model="item.value"></textarea>
</template>
</template>

Answer 2

由于isActive属性存在于items数组中的对象内部，因此需要将其作为iteratee的属性进行访问。

因此代码变为：

<div v-for="title in items">
<template slot="{{title.key}}" slot-scope="{title}">
<input v-if="title.isActive" type="text" v-model="title.value">
<textarea v-else type="text" v-model="title.value"></textarea>
</template>
</div>

Answer 3

感谢ittus的回答，经过小的修改后，以下方式开始工作。

<template v-for="column in columns" :slot="column.key" slot-scope="item">
<input v-if="item.isSelect" type="text" v-model="item.value">
<textarea v-else type="text" v-model="item.value"></textarea>
</template>

谢谢大家。

Answer 4

您可以查看此示例中的动态列。

new Vue({
el: "#app",
data: {
fields: [{
key: "id",
label: "Id",
colType: "span"
}, {
key: "name",
label: "Name",
colType: "button"
}, {
key: "uhh",
label: "uhh..",
colType: "idk"
}],
items: [{
id: 0,
name: "Test 0"
}, {
id: 1,
name: "Test 1"
}, {
id: 2,
name: "Test 2"
}]
}
});

<div id="app">
<b-table :items="items" :fields="fields">
<template v-for="(field, index) in fields" :slot="field.key" slot-scope="data">
<div v-if="field.colType === 'button'">
<h5>{{data.item.name}}</h5>
<b-button>Am Button</b-button>
</div>
<div v-else-if="field.colType === 'span'">
<h5>{{data.item.name}}</h5>
<span>Am Span</span>
</div>
<div v-else>
<h5>{{data.item.name}}</h5>
Am Confused
</div>
</template>
</b-table>
</div>

Answer 5

我没有得到这些答案。实际上对我有帮助的是：

https://forum.vuejs.org/t/how-to-pass-cell-templates-to-a-component-with-b-table/106283

还有这把小提琴：https://jsfiddle.net/skirtle/6of9dnpz/

toCellName (slot) {
return `cell(${slot})`
}

关键是toCellName返回正确的插槽名称。

Answer 6

您必须使用以下代码段。

<input v-if="title.isActive" type="text" v-model="title.value">
<textarea v-else type="text" v-model="title.value"></textarea>