elementUI多级联动el-cascader动态加载数据

      <el-form-item label="举报地点:" prop="regionCode">
        <el-cascader ref="cascaderlable" placeholder="选择举报地点"
          v-model="reportForm.regionCode"
          :props="town_list_select"
          :options="one_list_select"
          clearable
          @change="handleChange"></el-cascader>
      </el-form-item>
  data() {
    return {
      one_list_select:[{
          value: 'value',
          label: 'label',
        }],
      town_list_select:{
        value: 'value',
        label: 'label',
        // checkStrictly: true,//选择
        lazy: true,
        lazyLoad: (node, resolve) => {
          this.getChildProject(node, resolve)
          }
        },
    };
  },
methonds:{
    // 举报地点选择完触发
      handleChange(value) {
        if(this.$refs['cascaderlable'].getCheckedNodes()[0].pathLabels.length==2 ){
          this.reportForm.exRegionName=this.$refs['cascaderlable'].getCheckedNodes()[0].pathLabels[0]+this.$refs['cascaderlable'].getCheckedNodes()[0].pathLabels[1]
        }else{
          this.reportForm.exRegionName=this.$refs['cascaderlable'].getCheckedNodes()[0].pathLabels[0]
        }
        if(value.length==2 ){
          this.reportForm.regionCode=value[1]
        }else{
          this.reportForm.regionCode=value
        }
        
      },
      // 获取乡镇
    getTownRegionList() {
      getRegionCodeList(BaseRegionCode.value).then((data) => {
        if (data.data.code == 0) {
          this.one_list_select = data.data.data;
        }
      });
    },
    // 获取子层数据
    getChildProject (node, resolve) {
      getRegionCodeList(node.data.value).then((data) => {
        if (data.data.code == 0) {
         let nodes = []
         let {level}=node;
          data.data.data.map(el=>{
            let obj = {
              value:el.value,
              label:el.label,
              leaf: level >= 1,
            }
            nodes.push(obj)
          })
           resolve(nodes)
        }
      });
    },
}

### ElementUI 中实现多级联动搜索功能 在前端开发中,使用 `Element UI` 组件库可以方便地构建复杂的用户界面。对于多级联动搜索的需求,通常涉及多个选择框之间的关联逻辑。 #### 数据准备 为了实现多级联动效果,首先需要准备好各级选项的数据结构。这可以通过定义嵌套的对象数组来完成[^4]: ```javascript data() { return { town: [], // 所有的一级选择项 village: [], // 当前选中的镇下的所有村庄 options: [ { value: 'zhinan', label: '指南', children: [{ value: 'shejiyuanze', label: '设计原则' }] }, // 更多项... ], select: { value: '', label: '', children: [] }, childrenSelect: { value: '', label: '' } }; } ``` #### 级联选择器组件配置 利用 `el-cascader` 组件能够轻松创建一个多级菜单的选择控件。此组件支持自定义展示方式以及加载远程数据等功能[^1]: ```html <el-cascader :options="options" v-model="selectedOptions" @change="handleChange"> </el-cascader> ``` #### 处理变化事件 当用户的输入改变时触发相应的处理函数,在这里可以根据父级选择动态更新子级列表的内容并重新渲染页面[^3]: ```javascript methods: { handleChange(value) { const selectedTown = this.options.find(option => option.value === value[0]); if (selectedTown && Array.isArray(selectedTown.children)) { this.village = selectedTown.children.map(child => ({ ...child, parentValue: value[0] })); // 如果存在更深层次,则继续设置下一层的默认值为空字符串 if (value.length >= 2) { this.childrenSelect.label = ''; this.childrenSelect.value = ''; } } console.log('changed:', value); } } ``` #### 加载异步数据源 如果希望从服务器获取最新的地区信息作为选项内容,可以在初始化阶段或者每次切换上级分类的时候发起 HTTP 请求,并将返回的结果赋给对应的变量: ```javascript mounted() { axios.get('/api/towns') .then(response => { this.town = response.data; this.options = response.data.map(item => ({...item})); }) .catch(error => console.error(error)); } // 或者在 change 事件处理器内部调用类似的 API 来刷新子集数据 axios.post(`/api/villages?town=${this.select.value}`) .then(({ data }) => { this.village = data; }); ``` 通过上述方法组合起来就可以实现在 `Element UI` 应用程序内的多级联动搜索特性了。这种模式不仅限于地理位置查询场景,还可以应用于其他任何具有层次关系的数据集合之上。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq614756883

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值