我正在使用 Kendo Vue 的 TreeList 组件,当我在 TreeList 列上使用 Vue 模板并稍后展开或折叠元素时,问题就出现了。
如您所见,每次展开/折叠元素时,都会重新绘制“acciones”列模板,以此类推,直到我有很多实例。
父组件:
<template>
<div>
<treelistdatasource ref="remoteDataSource" :data="estructurasEvaluacion" :schema-model="model"/>
<treelist data-source-ref="remoteDataSource">
<treelist-column field="nombre"
title="Evaluación"
:width="250"
:expandable="true"/>
<treelist-column field="nombreCorto" title="Nombre corto"/>
<treelist-column field="porcentaje" title="Porcentaje (%)" :template="porcentajeTemplate"/>
<treelist-column title="Cálculo de nota" :template="calculoNotaTemplate"/>
<treelist-column title="Acciones" :template="accionesTemplate" :width="80"/>
</treelist>
</div>
</template>
methods: {
accionesTemplate (e) {
return {
template: Vue.component('acciones', Acciones),
templateArgs: Object.assign({}, e, {
parentComponent: this.$refs.tl
})
}
}
}
模板组件:
<template>
<div class="btn-group" role="group">
<button type="button" title="Editar" class="btn btn-primary">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<button type="button" title="Eliminar" class="btn btn-primary">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
</template>
<script>
export default {
data () {
return {
templateArgs: {}
}
}
}
</script>
非常感谢您提前。
编辑:
我正在使用 Kendo UI 2020.3.1118 和 Vue 2.5.17。
"devDependencies": {
"@progress/kendo-datasource-vue-wrapper": "^2020.3.1118",
"@progress/kendo-dropdowns-vue-wrapper": "^2020.3.1118",
"@progress/kendo-grid-vue-wrapper": "^2020.3.1118",
"@progress/kendo-inputs-vue-wrapper": "^2020.3.1118",
"@progress/kendo-layout-vue-wrapper": "^2020.3.1118",
"@progress/kendo-popups-vue-wrapper": "^2020.3.1118",
"@progress/kendo-theme-default": "^4.25.2",
"@progress/kendo-treelist-vue-wrapper": "^2020.3.1118",
"@progress/kendo-ui": "^2020.3.1118",
"@progress/kendo-window-vue-wrapper": "^2020.3.1118",
...
}