vue循环使用filter

最新推荐文章于 2024-07-18 15:02:06 发布

原创最新推荐文章于 2024-07-18 15:02:06 发布 · 962 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

前端笔记专栏收录该内容

26 篇文章

订阅专栏

这篇博客介绍了在Vue.js应用中如何在beforeCreate钩子中将Vue实例赋值给全局变量，并在过滤器中使用该变量遍历数组，进行数据处理。示例展示了如何通过expertTypeFilter过滤器，根据value值匹配expertTypeList数组，转换并返回处理后的label值。在模板中，使用过滤器展示el-table-column的专家类型数据。

最近在一个项目中，需要循环使用vue中的过滤器，通过遍历data中的数组，通过循环遍历。

先在这里声明一个变量

再在beforeCreate中把this赋给该变量

beforeCreate() {
    // 将vue实例赋值给全局变量app
    filterThis = this;
  },

filters: {
    expertTypeFilter(value) {
      if (value) {
        let arr = value.split(',')
        let arr2 = []
        for (let k = 0; k < arr.length; k++) {
          for (let i = 0; i < filterThis.expertTypeList.length; i++) {
            if (arr[k] == filterThis.expertTypeList[i].value) {
              arr2.push(filterThis.expertTypeList[i].lable)
            }
          }
        }
        let r = arr2.join('、')
        return r
      }
    },
  },

<el-table-column prop="type" label="专家类型">
        <template slot-scope="scope">
          <span>
            {{ scope.row.type | expertTypeFilter }}
          </span>
        </template>
      </el-table-column>