Vue element-UI级联选择器动态加载

置顶管小姐的斐波那契

已于 2022-07-28 14:19:15 修改

阅读量1.5k

点赞数 2

分类专栏： Vue 前端文章标签： vue.js

于 2020-09-15 11:11:11 首次发布

本文链接：https://blog.csdn.net/weixin_41884808/article/details/108595023

版权

前端同时被 2 个专栏收录

29 篇文章 7 订阅

订阅专栏

Vue

14 篇文章 0 订阅

订阅专栏

官网API先看一下
在这里插入图片描述我这个是地区的三级联动，撸代码拉
HTML

  <el-form-item label="所属地区" prop="stAgentCode" ref="stAgentCode" style="width: 100%;">
      <el-col :span="18">
          <el-cascader @change='changeStAgentCode' v-model="ruleForm.stAgentCode" style="width: 100%;"
              :props="props"></el-cascader>
          <!-- <el-cascader :options="options" :props="{ checkStrictly: true }" clearable></el-cascader> -->
      </el-col>
   </el-form-item>

<script>
    import { selectAddrByLevel } from "@/api/service";
    export default {
        data() {
            return {
                Indexs: '',
                isShow: true,
                loading: false,
                ruleForm: {                   
                    stAgentCode: '', // 所属地区  
                },
                 props: {
                    lazy: true,
                    // checkStrictly: true,
                    lazyLoad(node, resolve) {
                        const { level } = node;
                        //请求地区的接口
                        selectAddrByLevel({ addrLevel: level + 1, addrParentCode: node.value }).then(res => {
                            const nodes = res.data.map(item => ({
                                value: item.addrCode,
                                label: item.addrName,
                                leaf: level >= 2  //控制有几层节点
                            }));
                            resolve(nodes);
                        })
                    }
                },
            }
        },
        methods: {
         changeStAgentCode(e) {
               //其他的一些处理，比如联动其他的表单元素
          },
        }
</script>