El-select-tree NPM

el-select-tree

ElementUI's el-select combined with el-tree.

Online examples https://yujinpan.github.io/el-select-tree/

2.1 Support custom menu header/footer.
2.1 check-on-click-node is available with show-checkobx, default is false. Broken Change
2.1 expand-on-click-node is available, default is true.
2.1 Support virtual list.
2.0 Comprehensively improve the utilization rate of original parts.

Usage

Install

npm install --save el-select-tree

Require element-ui

If your project does not use element-ui, you need to introduce a separate element-ui package, like this:

import "el-select-tree/lib/element-ui";

Global registration

import Vue from "vue";
import ElSelectTree from "el-select-tree";

Vue.use(ElSelectTree);

In-component registration

import ElSelectTree from "el-select-tree";

export default {
  components: {
    ElSelectTree,
  },
};

Complete example

<template>
  <el-select-tree
    width="120px"
    placeholder="请选择内容"
    :data="treeData"
    v-model="value"
  ></el-select-tree>
</template>

<script>
import ElSelectTree from "el-select-tree";

export default {
  components: {
    ElSelectTree,
  },
  data() {
    return {
      value: 2,
      treeData: [
        {
          value: 1,
          label: "text1",
          children: [
            { value: 5, label: "text5" },
            { value: 6, label: "text6" },
          ],
        },
        { value: 2, label: "text2" },
        { value: 3, label: "text3" },
        { value: 4, label: "text5" },
      ],
    };
  },
};
</script>