el-select-tree

ElementUI's el-select combined with el-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.

Installation

npm install --save el-select-tree

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

Vue.use(ElSelectTree);

If your project does not depend on element-ui, you need to introduce additional component packages.

import "el-select-tree/lib/element-ui";
// If the project is loaded on demand, modify babel.config.js according to the official configuration.
// The complete style file is imported here.
// https://element.eleme.io/#/zh-CN/component/quickstart#an-xu-yin-ru
import "element-ui/lib/theme-chalk/index.css";

Usage

check-strictly

Any node can be selected, and the normal mode can only select leaf nodes.

Click me to show code

filterable

Support for filtering tree nodes.

Click me to show code

multiple

Multiple selection.

Click me to show code

props

Custom tree data props.

Click me to show code

lazy-load

Lazy load tree nodes.

Click me to show code

lazy-load-cache-data

Use cached data to display unloaded node names.

Click me to show code

slot

Custom option content.

Click me to show code

slots-menu 2.1-beta

Custom menu header/footer.

Click me to show code

render

Custom option content use render.

Click me to show code

with-form

Use with el-form.

Click me to show code

virtual Experimental 2.1-beta

Use virtual list. ElSelectTreeVirtual is optional, need register first.

npm i el-select-tree@2.1

import { ElSelectTreeVirtual } from "el-select-tree";

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

WARNING

Use banReactive when the amount of data is large. Otherwise, performance will be slower.

const empty = reactive({});
const banReactive = (obj) => {
  // skip vue reactive
  obj.__ob__ = empty.__ob__;
  return obj;
};

export default {
  data() {
    return {
      data: banReactive(
        Array(100000)
          .fill("")
          .map((item, index) => ({ value: index, label: index + "" }))
      ),
    };
  },
};

Props

el-select-tree inherits el-tree and el-select all props/methods/events/slots.

So no repeat here.

props	methods	events	slots
el-select	el-select	el-select	el-select
el-tree	el-tree	el-tree	el-tree

Own Props

Name	Type	Desc
cache-data	Array	The cache data for lazy load tree nodes, it can resolved correct label with unloaded nodes.

Own Slots 2.1-beta

Name	Desc
header	menu header
footer	menu footer