Question

我一直在尝试在kendo-grid-column中使用vuejs过滤器

<kendo-grid-column field="phone" title="Phone" :template="`kendo.toString(phone) | phoneformat`" width="10%"></kendo-grid-column>

结果显示为格式化的字符串，而不显示为

过滤器，我用作：

const filters = [
  {
    name: "phoneformat",
    execute: value => {
        debugger
      var piece1 = phoneNumber.substring(0, 3); //123
      var piece2 = phoneNumber.substring(3, 6); //456
      var piece3 = phoneNumber.substring(6); //7890

      //should return (123)456-7890
      return kendo.format("({0})-{1}-{2}", piece1, piece2, piece3);
    }
  }
];

export default filters;

我一直将过滤器全局注册为：

import filters from './shared/extension'

filters.forEach(f => {
   Vue.filter(f.name, f.execute)
})

帮帮我，我在这里想念的东西。

Answer 1

:template="`kendo.toString(phone) | phoneformat`"

您在:template属性值周围有反引号，这意味着您正在将template道具绑定到JavaScript template literal，后者的计算结果是文字字符串

"kendo.toString(phone) | phoneformat"

解决方案是简单地绑定一个表达式

<kendo-grid-column :template="phone | phoneformat" ...

请参见

Kendo-vue-ui包装器kendo-grid-column格式的网格电话号码

1 个答案: