element-ui 的 el-select 與 el-tree 的功能組合

簡介

element-ui 的 el-select 與 el-tree 組件的功能組合。

• 在線實例：https://yujinpan.github.io/el-select-tree/
• 實現原理：https://github.com/yujinpan/el-select-tree/blob/master/src/components/index.vue

使用

安裝

npm install --save el-select-tree

對 element-ui 的依賴

如果你的項目中沒有使用 element-ui,
你需要引入單獨的 element-ui 包，像這樣：

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

全局註冊

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

Vue.use(ElSelectTree);

局部註冊

import ElSelectTree from 'el-select-tree';

export default {
  components: {
    ElSelectTree
  }
};

完整的實例

<template>
  <el-select-tree
    width="120px"
    placeholder="請選擇內容"
    :data="treeData"
    :disabled-values="disabledValues"
    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' }
      ],
      disabledValues: [3]
    };
  }
};
</script>

組件 API

屬性

name	type	description
value/v-model	*/*[]	綁定值，如果 multiple 屬性爲 true，綁定的必須爲 Array 類型
data	object[]	下拉的選項數據，是一個樹形結構，參考上面的實例數據
props	object	樹形結構的參數對照表，默認：{ value: 'value', label: 'label', children: 'children' }
multiple	boolean	是否多選，默認：false
placement	string	繼承 element-ui 的 placement 屬性，默認：botttom-start
size	string	繼承 element-ui 的 size 屬性，默認： samll
width	string	組件的寬度，默認： 240px
disabled	boolean	是否禁用，默認：false
disabledValues	*[]	禁用的值，默認：[]
placeholder	string	佔位符，默認：‘請選擇’

事件

• change(value) 選項修改事件，返回修改的值

更多擴展組件：
el-table-infinite-scroll