本文主要是介绍Cascader 重写搜索查询，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
因为功能需求,需要两种查询组合,
<Cascader placeholder="请选择采集点位" ref="Cascader" @on-visible-change="opencader" transfer-class-name="Cascader" :data="allQXList" not-found-text="暂无数据" @on-change="getcode" :load-data="loadData" style="width: 280px" v-model="areacodeArr"></Cascader>//不要fillter了,因为没有filter,但发现无法输入文字,查看源代码,发现是readonly="readonly",导致的只要把它移出就可以输入.
_this.$nextTick(()=>{//绑定监听Cascader内值的变化,但需要多次遍历,将设备导入let inputNode = document.getElementsByClassName("Cascader")[0].previousElementSibling.childNodes[2].childNodes[6];inputNode.removeAttribute("readOnly"); //移除只读inputNode.addEventListener("input", function(){//因为change是需要在失焦的情况下才能获取到value,但我们需要实时监听valuelet deviceArr = [];setTimeout(() => {if(!this.value || this.value == '' || this.value == undefined){_this.getArealist();}else{if(_this.timer) clearTimeout(_this.timer);// setimeout获取最新数据 _this.timer = setTimeout(()=>{//请求接口,new promise形式_this.getcjlist(this.value).then(val => {if(!this.value || this.value == '' || this.value == undefined){_this.getArealist();return false;}if(val){if(val && val.length>0){val.map((vitem,vindex)=>{let obj = {value: vitem.deviceid,label: vitem.name,};deviceArr.push(obj);})}_this.allQXList = deviceArr;}setTimeout(() => {//复制时可能会出现下拉未展开,需要触发聚焦事件展开下拉,_this.$refs['Cascader'].onFocus();},500)})},500);}}, 100);});})当关闭且value为空是需要重置数据
opencader:function(type){let _this = this;let inputNode = document.getElementsByClassName("Cascader")[0].previousElementSibling.childNodes[2].childNodes[6];if(!type){if(_this.pagination.deviceid == '' || _this.pagination.deviceid == undefined){inputNode.value = ''}}if(!inputNode.value || inputNode.value == '' || inputNode.value == undefined){_this.getArealist();}},这篇关于Cascader 重写搜索查询的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
