iview利用Cascader 组件实现级联选择功能

最新推荐文章于 2024-08-07 09:54:26 发布

ljxbbss

最新推荐文章于 2024-08-07 09:54:26 发布

阅读量4.9k

点赞数 2

分类专栏： iview

本文链接：https://blog.csdn.net/ljxbbss/article/details/107989716

版权

本文记录了如何利用iview的Cascader组件完成后台省市区三级联动的选择功能。通过设置`:data`初始化数据，使用`v-model`绑定选定值，并借助`:load-data`动态加载下级数据。关键属性包括`id`、`label`、`value`、`level`和`children`，通过监听`load-data`事件，根据当前选中项的`id`请求并填充下级数据，以此实现级联选择。

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

后台需要做省市区三级联动选择的功能，以前都用的是select组件，这次想和shop一样，用Cascader 这个组件去实现一把

网上找了许多代码，都不是特别完善，正好自己写出来了，就记录一下，以后可以用到。


        <span style="margin-bottom:200px;" class="controlText">楼盘地址：</span><form-item  prop="spuAddresses">
            <Cascader :data="platOptions" v-model="allQueryParam.spuAddresses" placeholder="请选择行政区划"
                      :load-data="loadData"	change-on-select clearable="false"  trigger="click">
            </Cascader>
        </form-item>

:data是用来初始化一开始的第一级的数据，比如省市区，那么第一级就是获取所有省份的数据

 //渲染查询框中的三级地址
        getProvinces: function () {
            // 1、先获取所有的省份并返回
            // 2.同时修改对象，每一项添加属性cities,并设置为空数组、
            jQuery.ajax({
                url:"/xxxxxxxxx&#