vue2+iview-下拉树

小桥流水人家丶

已于 2023-03-07 17:33:30 修改

阅读量242

点赞数 1

文章标签： view design vue.js javascript vue

于 2023-03-07 17:01:06 首次发布

本文链接：https://blog.csdn.net/xu568110526/article/details/129385453

版权

本文介绍了如何在Vue2项目中结合Ivew设计框架，使用@riophae/vue-treeselect库创建下拉树组件。通过安装依赖、编写子组件treeSel.vue以及在父组件中的应用，最终实现了一个功能完善的下拉树选择器，并展示了实际运行的效果图。

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

下载 npm install --save @riophae/vue-treeselect

子组件treeSel.vue

<template>
  <div id="app">
    <treeselect
      :multiple="true"
      :options="treeData"
      :disable-branch-nodes="true"
      v-model="value"
      search-nested
      @select="treeOpen"
      @deselect="desData"
      style="width: 300px"
      @input="treeInput"
      :show-count="true"
      :default-expand-level="2"  //展开第二排
    />
  </div>
</template>

<script>
// import the component
import Treeselect from "@riophae/vue-treeselect";
// import the styles
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import axios from "axios";
import TREESELECTURL from "../../../api/global.js";
export default {
  props: {
    labelTreeDataArr: {
      typeof: Array,
      default: () => [],
    },
  },
  components: { Treeselect },
  data() {
    return {
      value: null,
      treeData: [],
      arrTree: [],
    };
  },
  methods: {
    treeOpen(node) {
      if (this.arrTree.includes(node.label)) {
        return this.arrTree;
      } else {
        this.arrTree.push(node.label);
      }