el-cascader动态加载多级数据

没有天赋的搬砖者

已于 2022-06-22 16:00:24 修改

阅读量2.1k

点赞数 1

文章标签： elementui vue.js javascript

于 2021-12-14 13:11:58 首次发布

本文链接：https://blog.csdn.net/sdad2154/article/details/121924979

版权

这个博客展示了如何在Vue中利用el-cascader组件，并结合axios实现级联选择的数据懒加载。通过设置属性如value、label、expandTrigger、lazy和checkStrictly，以及定义lazyLoad方法来从API获取各级别部门数据。

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

<template>

  <el-cascader :props="props" @change="handleChange"></el-cascader>

</template>



<script>

import axios from "axios";

export default {

  data() {

    return {

      props: {

        value: "id",

        label: "name",

        expandTrigger: "hover",

        lazy: true,

        checkStrictly: true,

        lazyLoad(node, resolve) {

          console.log(resolve);

          const { level } = node;

          if (level == 0) {

            axios.get(`/api/system/department/v1/${level}/list`).then((res) => {

              console.log(node.data);

              if (res.data.data) {

                resolve(res.data.data);

              } else {

                resolve([]);

              }

            });

          } else {

            axios

              .get(`/api/system/department/v1/${node.data.id}/list`)

              .then((res) => {

                resolve(res.data.data);

              });

          }

        },

      },

    };

  },

  methods: {

    handleChange(val) {},

  },

};

</script>



<style lang="scss">

</style>