[JavaScript知识库]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,但我们需要实时监听value

????????????????????let?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();
                }
            },