elementui 级联选择-elementUI如何制作级联选择器以及步骤是什么

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

上一篇: 如何实现一个简单的Vue首屏性能优化组件，有哪些方法下一篇: 如何实现JS对二叉树的遍历elementui 级联选择，有哪些遍历算法

本篇文章我们就来了解一下“elementUI如何制作级联选择器以及有哪些步骤和流程”。 下面是详细的解释，方便您学习和理解。 有需要的同学可以参考一下。 下面请跟随小编的思路来学习。

本文示例分享了elementUI实现级联选择器的具体代码，供大家参考。 具体内容如下

1、前端调用socket，向后端传输数据

2.使用VUE代码显示级联选项

3.定义JS

data() {
   options: [],
      selectedOptions: [],
      defaultParams: {
        label: "name",
        value: "code",
        children: "children",
      },
}，
created() {
 listArea(330000).then((response) => {
       console.log(response);
       this.options = this.getTreeData(response);
       this.loading = false;
     });
},
methods: {
 // 递归消除空数组
    getTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    }
}

4、疗效如下

感谢您的阅读elementui 级联选择，以上就是《elementUI如何制作级联选择器以及有哪些步骤和流程》的内容。 学习完这篇文章，相信你对elementUI是如何制作级联选择器以及有哪些步骤和流程有了更深入的感受。 这里是群英网，小编将为您推送更多相关知识点的文章，欢迎关注！