联选择器的实现

高树悲风

已于 2023-07-18 16:03:46 修改

阅读量129

点赞数

文章标签：前端 java javascript

于 2023-07-13 16:18:29 首次发布

本文链接：https://blog.csdn.net/caoshilong1/article/details/131705148

版权

文章描述了一个JavaScript函数`getDictsWithParam`用于根据区划选择动态获取并设置街镇的下拉列表数据。在Vue中遇到问题，但通过配合key实现了组件的刷新。`setComboData`函数用于处理返回的数据，并添加默认选项。

摘要由CSDN通过智能技术生成

默认街镇只有两个选项选择区划之后才有多个选择。

@change改变时调用时时变化数据

   xqChange(value){
     // console.log("=========================",value)
        this.listQuery.jzd="";
        if(value!=null&&value!=''){
          let param={
            "parentSelectValue": value,
            "parentType": "ddc_xq",
            "types": "ddc_jzd"
          };
       //这里用js函数并回调返回街镇的数据
          this.getDictsWithParam(param,this.setComboData);
        }else{
          this.jzdComboData=[{type:"未填写",name:"未填写"},
            {type:"其他",name:"其他"}]
        }
      },
        setComboData(data){
        console.log("data=========",data)
        this.jzdComboData=data.ddc_jzd
        this.jzdComboData.splice(0,0,
          {type:"其他",name:"其他"});
        // this.jzdComboData.splice(0,0,
        //   {type:"-乡、镇、街-",name:"-乡、镇、街-"});
        this.jzdComboData.splice(0,0,{type:"未填写",name:"未填写"});
      },

 getDictsWithParam(param,callBack) {
      getDictionaryDetailsByTypes(param).then(response => {
        if(callBack){
          callBack(response.data);
        }
      })
    },