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