vue中父组件动态改变子组件的过滤器filter

最新推荐文章于 2024-07-04 10:07:27 发布

haohao_ding

最新推荐文章于 2024-07-04 10:07:27 发布

阅读量654

点赞数

分类专栏： vue 文章标签： javascript html vue.js

本文链接：https://blog.csdn.net/haohao_ding/article/details/120156173

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文通过一个示例展示了如何在Vue中从父组件动态控制子组件的过滤器，特别是在一个包含el-select的场景下。子组件接收来自父组件的属性，包括是否启用过滤器、过滤函数，根据这些来决定el-select的禁用状态。父组件通过传递方法myfilter来实现具体过滤逻辑，当val.a等于3时，select选项变为可用，否则不可用。此案例对于理解Vue组件间通信和自定义过滤器的使用具有参考价值。

摘要由CSDN通过智能技术生成

最近有个朋友问我怎么在父组件动态改变子组件的过滤器filter，想了一下写了一个demo案例

子组件内容如下：

<template>
  <div>
    <div v-for="(item,index) in tests" :id="index">
      <el-select
        v-model="selectData"
        multiple
        filterable
        allow-create
        default-first-option
        :disabled="item | disabledFilter(disabled,enableFilter,fatherMethod)"
        placeholder="请选择文章标签">
        <el-option
          v-for="item1 in options"
          :key="item1.value"
          :label="item1.label"
          :value="item1.value">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
  export default {
    name: "testSelect",
    props: {
      // 未开启过滤器时使用
      disabled: {
        type: Boolean,
        default: () => false
      },
      // 开启过滤器
      enableFilter: {
        type: Boolean,
        default: () => false
      },
      // 开启过滤器使用
      fatherMethod: {
        type: Function,
        default: () => null
      }
    },
    data() {
      return {
        selectData:'',
        options: [{
          value: 'HTML',
          label: 'HTML'
        }, {
          value: 'CSS',
          label: 'CSS'
        }, {
          value: 'JavaScript',
          label: 'JavaScript'
        }],
        tests: [
          {
            a: 1,
            b: 1
          },
          {
            a: 2,
            b: 2
          },
          {
            a: 3,
            b: 3
          },
          {
            a: 4,
            b: 4
          },
        ],
      }
    },
    filters: {
      disabledFilter(val, disabled, enableFilter, fatherMethod) {
        if (enableFilter) {
          if (fatherMethod) {
            return fatherMethod(val);
          }
          return false;
        } else {
          return disabled
        }
      }
    },
  }
</script>

<style scoped>

</style>

父组件调用

<testSelect :enableFilter="true" :father-method="myfilter"></testSelect>

  methods: {
    myfilter(val){
      if(val.a === 3){
        return true
      }else{
        return false
      }
    },
 }