Vue2：我可以将可选的全局过滤器传递给可重用的组件吗？

问题描述

我对Vue很陌生。我正在将表作为组件工作，这应该很多次。到目前为止，一切都很好，但是现在我想使用一个过滤器，可以将其可选地传递给它。

这就是我“调用”表的方式：

  <table
    :headers="headers"
    :items="some.data"
  ></table>

 data () {
    return {
      headers: [
        { title: 'date',value: ['date'],filter: 'truncate(0,10,'...')' },]
    }
  }

这是我的桌子组件

    <template>
<div>
  <table class="table">
    <thead>
      <tr>
        <!-- <th v-for="header in headers" :key="header.id" scope="col">{{ header.title }}</th> -->
        <th v-for="header in headers" :key="header.id" scope="col">
          {{ header.title }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id" scope="col">
        <td v-for="header in headers" :key="header.id" scope="row">
          <!-- {{item}} -->
          <span v-for="val in header.value" :key="val.id">
             {{item[val] | truncate(0,'...') }}
          </span>
            <!-- {{header.filter}} -->
        </td>
      </tr>
    </tbody>
  </table>
  </div>
</template>

<script >


export default {
  name: 'Table',props: {
    headers: Array,items: Array
  }
}
</script>

我的全局过滤器：

Vue.filter('truncate',function (text,start,truncLength,clamp = '') {
  return text.slice(start,truncLength) + clamp
  // return text.slice(0,stop) + (stop < text.length ? clamp || ' ...' : '')
})

我当时希望添加一个可选的过滤器（通过v-如果我愿意的话）。到目前为止，我可以将过滤器呈现为字符串...但无法执行。

即使我将过滤器放在跨度中，它也不起作用（然后在控制台中显示“ text.slice不是函数”。

我无法成功对其进行谷歌搜索，因为使用filter / filter时，它主要是关于如何在数据上使用.filter（...）作为JS方法，而不是作为Vue过滤器。

有什么建议吗？

解决方法

过滤器是在html的JSX模板中运行的函数。如何创建自定义Vue.js过滤器的示例

Vue.filter('ssn',function (ssn) { // ssn filter
            return ssn.replace(/(\d{3})(\d{2})(\d{4})/,'$1-$2-$3');
        });

使用

{{stringToTrans | ssn}}

要在此范围之外使用过滤器，可以使用计算属性或标准函数，如

convertedDateString() { // computed
   return this.$moment(this.dateString).format('MM/DD/YYYY')
}

convertedDateString(dateString) { // method
   return this.$moment(dateString).format('MM/DD/YYYY')
}

vue-filter vue.js