vue.js - 使用 kendo-grid columns 属性的自定义 Kendo Vue Grid Wrapper 列模板
问题描述
我有以下模板,我想用它来呈现 Kendo 网格包装单元格的内容:
<template>
<span>
Template Rendered: {{ templateArgs.name }}
</span>
</template>
<script>
export default {
name: 'template1',
data () {
return {
templateArgs: {}
}
}
}
</script>
我可以使用 kendo-grid-column 元素来做到这一点,如下所示:
<template>
<div>
<kendo-grid :data-source="datasource">
<kendo-grid-column field="name" title="Name" :template="itemTemplate"></kendo-grid-column>
</kendo-grid>
</div>
</template>
<script>
import Vue from 'vue'
import { Grid, GridColumn } from '@progress/kendo-grid-vue-wrapper'
import Template from './Template.vue'
var itemTemplate = Vue.component(Template.name, Template)
export default {
name: 'HelloWorld',
components: {
'kendo-grid': Grid,
'kendo-grid-column': GridColumn
},
methods: {
itemTemplate: function (e) {
return {
template: itemTemplate,
templateArgs: e
}
}
},
data () {
return {
datasource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
}
}
}
</script>
我想改用 kendo-grid columns 属性,如下所示:
<template>
<div>
<kendo-grid :data-source="datasource" :columns="columns">
</kendo-grid>
</div>
</template>
<script>
import Vue from 'vue'
import { Grid, GridColumn } from '@progress/kendo-grid-vue-wrapper'
import Template from './Template.vue'
var itemTemplate = Vue.component(Template.name, Template)
export default {
name: 'HelloWorld',
components: {
'kendo-grid': Grid,
'kendo-grid-column': GridColumn
},
methods: {
itemTemplate: function (e) {
return {
template: itemTemplate,
templateArgs: e
}
}
},
data () {
return {
columns: [{ field: "name", title: "Name", template: this.itemTemplate }],
datasource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
}
}
}
</script>
不过,第二种情况下的代码有问题。我没有使用模板渲染单元格,而是将 [object Object] 作为单元格内容。我应该怎么做才能解决这个问题?
解决方案
Vue 网格包装器不支持在使用自定义渲染模板时使用 columns 属性。然而,类似的事情可以用原生网格来完成。
推荐阅读
- c# - 使用 Azure SignalR 时,无法加载 Microsoft.Extensions.Logging.Abstractions
- javascript - 如何避免在洪水填充算法期间超过最大调用堆栈大小?
- css - 按字符类更改 CSS 中的样式
- mysql - 选择具有总和的mysql数据
- node.js - 填充NodeJs MongoDB后获取数据
- docker - docker 多个阶段 - docker gradle 构建成功,但 docker openjdk 构建失败:复制失败:未指定源文件
- java - Eclipse 中的 Java 13 和 JavaFX 13
- html - 如何在不使用路径的情况下制作眼睛形状的 SVG?
- php - 在左连接中显示来自 master 的 1 个主键
- python - SSH 隧道转发通过 python 和 bash 连接到 Exasol 数据库