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

小半 • 2022年5月13日下午8:17 • 后端开发 • 阅读 95

最近有个朋友问我怎么在父组件动态改变子组件的过滤器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
      }
    },
 }

效果：

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/5321.html

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

相关推荐