Vue Tree Select

A tree select component for Vue 2.x based on Element UI.

Installation

npm install vue-tree-select

Usage

// main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import TreeSelect from 'vue-tree-select'

Vue.use(ElementUI)
Vue.use(TreeSelect)

<!-- YourComponent.vue -->
<template>
  <tree-select
    v-model="value"
    :options="options"
    :disabled="false"
    placeholder="请选择"
    @change="handleChange"
  />
</template>

<script>
export default {
  data() {
    return {
      value: null,
      options: [
        {
          key: 1,
          label: '一级 1',
          children: [
            {
              key: 4,
              label: '二级 1-1'
            }
          ]
        },
        {
          key: 2,
          label: '一级 2',
          children: [
            {
              key: 5,
              label: '二级 2-1'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleChange(data) {
      console.log('selected:', data)
    }
  }
}
</script>

Props

| Property | Type | Default | Description | |----------|------|---------|-------------| | value | Number | null | 选中的值 | | options | Array | [] | 树形数据 | | disabled | Boolean | false | 是否禁用 | | placeholder | String | '请选择' | 占位文本 |

Events

| Event Name | Parameters | Description | |------------|------------|-------------| | change | (data: Object) | 选中值变化时触发 |

License

MIT