下拉框
<template>
<el-select v-model="value" filterable placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
上面这种会直接通过filterabel直接过滤,另外就是添加方法
<template>
<el-select v-model="value" :filter-method="selectfilter" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
data(){
selectfilter:'',
}
method:{
selectfilter(val){
this.value =val;
if(val){
this.options =this.optionsCopy.filter((item)=>{
if(!! item.label.indexOf(val)||!! item.label.toUpperCase().indexOf(val.toUpperCase())){
return trure;
}
})
}else{
this.options= this.optionsCopy;
}
<el-input
placeholder="输入关键字进行过滤"
v-model="filterText">
</el-input>
<el-tree
class="filter-tree"
:data="data"
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode"
ref="tree">
</el-tree>
<script>
export default {
watch: {//输入框监听tree的过滤字段
filterText(val) {
this.$refs.tree.filter(val);
}
},
methods: {
filterNode(value, data) { //这里是找到过滤字段的下标
if (!value) return true;
return data.label.indexOf(value) !== -1;
}
},
element 下拉框过滤 和tree过滤
最新推荐文章于 2022-11-02 00:20:40 发布