vue el-cascader添加远程搜索方法

核心：1、使用before-filter，在此处编写处理的逻辑代码。2、结合自带的:debounce属性添加防抖。3、@input.native使用input事件编写搜索框未输入需要展示的数据的逻辑。4、@change中编写，所选项清空时的逻辑

<el-cascader

:key="keyNum"

filterable

@input.native="inputNative"

:before-filter="beforeFilter"

v-model="form.select"

:props="cascaderProps"

ref="cascaderRef"

@change="handleChange"

:options="cascaderOptiones"

placeholder="请选择"

clearable

:show-all-levels="false"

debounce="800"

/>

1、:before-filter的方法代码

beforeFilter(value) {

let str = value;

if (str && str !== "") {

//计算中文字节,原需求添加大于2个汉字时才发起搜索请求

let len = 0;

for (var i = 0; i < str.length; i++) {

var c = str.charCodeAt(i); //单字节加1

if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {

len++;

} else {

len += 2;

}

}

if(len>4){

listData({ str: str }).then((res) => {

this.cascaderOptiones.length = 0;

res.data.map((item) => {

item.value = item.id;

item.id = item.id;

item.label = item.label;

});

this.cascaderOptiones = res.data;

});

}

} else {

//此处编写搜索自负为空时的代码逻辑

}

return false;

},

2、@input.native的方法代码

inputNative(e){

// console.log(e.target.value)

if(e.target.value==''||!e.target.value){

this.beforeFilter('')

}

},

3、@change的方法（处理点击自带x标志删除所选项后的代码，与filterable联用时）

handleChange(value, label) {

if(!value){

console.log(value,label,'节点值为空')

this.beforeFilter('')

}

//可填写其余判断

}