Vue.js学习（八）—— 树形结构下拉框组件vue-treeselect

npm install @riophae/vue-treeselect --save

import Treeselect from '@riophae/vue-treeselect'import '@riophae/vue-treeselect/dist/vue-treeselect.css'

components: { Treeselect }

 <treeselect
    :options="dataList"     //接受数组
    placeholder="请选择上级菜单"
    v-model="form.parentId"/>

<treeselect
    :options="optionsMechanism"
    placeholder="select...."
    v-model="value"/>

       value:null,
       optionsMechanism:[{
          id: 'fruits',
          label: 'Fruits',
          children: [ {
            id: '432673427163429080',
            label: 'Apple 🍎',
            isNew: true,
          }, {
            id: 'grapes',
            label: 'Grapes 🍇',
          }, {
            id: 'pear',
            label: 'Pear 🍐',
          }, {
            id: 'strawberry',
            label: 'Strawberry 🍓',
          }, {
            id: 'watermelon',
            label: 'Watermelon 🍉',
          } ],
        }, {
          id: 'vegetables',
          label: 'Vegetables',
          children: [ {
            id: 'corn',
            label: 'Corn 🌽',
          }, {
            id: 'carrot',
            label: 'Carrot 🥕',
          }, {
            id: 'eggplant',
            label: 'Eggplant 🍆',
          }, {
            id: 'tomato',
            label: 'Tomato 🍅',
          } ],
      }],
    }
}
　　效果图如下：

几个常用的属性：1、禁用控件：在标签加disabled属性为true2、多选控件：在标签加multiple属性为true3、禁用分支：在树结构数据中与label平级的地方添加isDisabled:true

  <treeselect
    :multiple="true"
    :options="options"
    placeholder="Select your favourite(s)..."
    v-model="value"
    />
  <pre class="result">{{ value }}</pre>
</div>

  data: () => ({
    value: [],
    options: [ {
      id: 'fruits',
      label: 'Fruits',
      children: [ {
        id: 'apple',
        label: 'Apple ?',
        isNew: true,
      }, {
        id: 'grapes',
        label: 'Grapes ?',
      }, {
        id: 'pear',
        label: 'Pear ?',
      }, {
        id: 'strawberry',
        label: 'Strawberry ?',
      }, {
        id: 'watermelon',
        label: 'Watermelon ?',
      } ],
    }, {
      id: 'vegetables',
      label: 'Vegetables',
      children: [ {
        id: 'corn',
        label: 'Corn ?',
      }, {
        id: 'carrot',
        label: 'Carrot ?',
      }, {
        id: 'eggplant',
        label: 'Eggplant ?',
      }, {
        id: 'tomato',
        label: 'Tomato ?',
      } ],
    } ],
  }),
}

<div>
  <treeselect
    name="demo"
    :multiple="multiple"
    :clearable="clearable"
    :searchable="searchable"
    :disabled="disabled"
    :open-on-click="openOnClick"
    :open-on-focus="openOnFocus"
    :clear-on-select="clearOnSelect"
    :close-on-select="closeOnSelect"
    :always-open="alwaysOpen"
    :append-to-body="appendToBody"
    :options="options"
    :limit="3"
    :max-height="200"
    v-model="value"
    />
  <pre class="result">{{ value }}</pre>
  <p>
    <label><input type="checkbox" v-model="multiple">Multi-select</label>
    <label><input type="checkbox" v-model="clearable">Clearable</label>
    <label><input type="checkbox" v-model="searchable">Searchable</label>
    <label><input type="checkbox" v-model="disabled">Disabled</label>
  </p>
  <p>
    <label><input type="checkbox" v-model="openOnClick">Open on click</label>
    <label><input type="checkbox" v-model="openOnFocus">Open on focus</label>
  </p>
  <p>
    <label><input type="checkbox" v-model="clearOnSelect">Clear on select</label>
    <label><input type="checkbox" v-model="closeOnSelect">Close on select</label>
  </p>
  <p>
    <label><input type="checkbox" v-model="alwaysOpen">Always open</label>
    <label><input type="checkbox" v-model="appendToBody">Append to body</label>
  </p>
</div>

import { generateOptions } from './utils'
 export default {
  data: () => ({
    multiple: true,
    clearable: true,
    searchable: true,
    disabled: false,
    openOnClick: true,
    openOnFocus: false,
    clearOnSelect: true,
    closeOnSelect: false,
    alwaysOpen: false,
    appendToBody: false,
    value: [ 'a' ],
    options: generateOptions(2, 3),
  }),
 
  watch: {
    multiple(newValue) {      if (newValue) {        this.value = this.value ? [ this.value ] : []
      } else {        this.value = this.value[0]
      }
    },
  },
}

<treeselect
  :multiple="true"
  :options="options"
  :load-options="loadOptions"
  placeholder="Try expanding any folder option..."
  v-model="value"
  />

import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
 // We just use `setTimeout()` here to simulate an async operation// instead of requesting a real API server for demo purpose.const simulateAsyncOperation = fn => {
  setTimeout(fn, 2000)
}
 
export default {
  data: () => ({
    value: null,
    options: [ {
      id: 'success',
      label: 'With children',      // Declare an unloaded branch node.
      children: null,
    }, {
      id: 'no-children',
      label: 'With no children',
      children: null,
    }, {
      id: 'failure',
      label: 'Demonstrates error handling',
      children: null,
    } ],
  }),
 
  methods: {
    loadOptions({ action, parentNode, callback }) {      // Typically, do the AJAX stuff here.      // Once the server has responded,      // assign children options to the parent node & call the callback.
 
      if (action === LOAD_CHILDREN_OPTIONS) {        switch (parentNode.id) {        case 'success': {
          simulateAsyncOperation(() => {
            parentNode.children = [ {
              id: 'child',
              label: 'Child option',
            } ]
            callback()
          })          break
        }        case 'no-children': {
          simulateAsyncOperation(() => {
            parentNode.children = []
            callback()
          })          break
        }        case 'failure': {
          simulateAsyncOperation(() => {
            callback(new Error('Failed to load options: network error.'))
          })          break
        }        default: /* empty */
        }
      }
    },
  },
}

<treeselect
  :load-options="loadOptions"
  :options="options"
  :auto-load-root-options="false"
  :multiple="true"
  placeholder="Open the menu..."
  />

import { LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
 const sleep = d => new Promise(r => setTimeout(r, d))
let called = false
 export default {
  data: () => ({
    options: null,
  }),
 
  methods: {    // You can either use callback or return a Promise.
    async loadOptions({ action/*, callback*/ }) {      if (action === LOAD_ROOT_OPTIONS) {        if (!called) {          // First try: simulate an exception.
          await sleep(2000) // Simulate an async operation.
          called = true
          throw new Error('Failed to load options: test.')
        } else {          // Second try: simulate a successful loading.
          await sleep(2000)          this.options = [ 'a', 'b', 'c', 'd', 'e' ].map(id => ({
            id,
            label: `option-${id}`,
          }))
        }
      }
    },
  },
}

<treeselect
  :multiple="true"
  :async="true"
  :load-options="loadOptions"
  />

import { ASYNC_SEARCH } from '@riophae/vue-treeselect'
 const simulateAsyncOperation = fn => {
  setTimeout(fn, 2000)
}
 
export default {
  methods: {
    loadOptions({ action, searchQuery, callback }) {      if (action === ASYNC_SEARCH) {
        simulateAsyncOperation(() => {          const options = [ 1, 2, 3, 4, 5 ].map(i => ({
            id: `${searchQuery}-${i}`,
            label: `${searchQuery}-${i}`,
          }))
          callback(null, options)
        })
      }
    },
  },
}

<div>
  <treeselect
    :multiple="true"
    :options="options"
    :flat="true"
    :sort-value-by="sortValueBy"
    :default-expand-level="1"
    placeholder="Try selecting some options."
    v-model="value"
    />
  <pre class="result">{{ value }}</pre>
  <p><strong>Sort value by:</strong></p>
  <p class="options">
    <label><input type="radio" value="ORDER_SELECTED" v-model="sortValueBy">Order selected</label>
    <label><input type="radio" value="LEVEL" v-model="sortValueBy">Level</label>
    <label><input type="radio" value="INDEX" v-model="sortValueBy">Index</label>
  </p>
</div>

 export default {
  data() {    return {
      value: [ 'c', 'aaa', 'bb' ],
      options: generateOptions(3),
      sortValueBy: 'ORDER_SELECTED',
    }
  },
}

  <treeselect
    :multiple="true"
    :options="options"
    :value-consists-of="valueConsistsOf"
    v-model="value"
    />
  <pre class="result">{{ value }}</pre>
  <p><strong>Value consists of:</strong></p>
  <p class="options">
    <label><input type="radio" value="ALL" v-model="valueConsistsOf">All</label><br>
    <label><input type="radio" value="BRANCH_PRIORITY" v-model="valueConsistsOf">Branch priority</label><br>
    <label><input type="radio" value="LEAF_PRIORITY" v-model="valueConsistsOf">Leaf priority</label><br>
    <label><input type="radio" value="ALL_WITH_INDETERMINATE" v-model="valueConsistsOf">All with indeterminate</label>
  </p>
</div>
export default {

  data: () => ({
    value: [ 'team-i' ],
    valueConsistsOf: 'BRANCH_PRIORITY',
    options: [ {
      id: 'company',
      label: 'Company ?',
      children: [ {
        id: 'team-i',
        label: 'Team I ?',
        children: [ {
          id: 'person-a',
          label: 'Person A ?',
        }, {
          id: 'person-b',
          label: 'Person B ?',
        } ],
      }, {
        id: 'team-ii',
        label: 'Team II ?',
        children: [ {
          id: 'person-c',
          label: 'Person C ?',
        }, {
          id: 'person-d',
          label: 'Person D ?',
        } ],
      }, {
        id: 'person-e',
        label: 'Person E ?',
      } ],
    } ],
  }),
}　　您可以通过设置

<treeselect
  :multiple="true"
  :options="options"
  :value="value"
  />

  data: () => ({
    options: [ {
      id: 'folder',
      label: 'Normal Folder',
      children: [ {
        id: 'disabled-checked',
        label: 'Checked',
        isDisabled: true,
      }, {
        id: 'disabled-unchecked',
        label: 'Unchecked',
        isDisabled: true,
      }, {
        id: 'item-1',
        label: 'Item',
      } ],
    }, {
      id: 'disabled-folder',
      label: 'Disabled Folder',
      isDisabled: true,
      children: [ {
        id: 'item-2',
        label: 'Item',
      }, {
        id: 'item-3',
        label: 'Item',
      } ],
    } ],
    value: [ 'disabled-checked' ],
  }),
}

  :multiple="true"
  :options="options"
  :disable-branch-nodes="true"
  v-model="value"
  search-nested  />export default {

  data: () => ({
    value: null,
    options: [ {
      key: 'a',
      name: 'a',
      subOptions: [ {
        key: 'aa',
        name: 'aa',
      } ],
    } ],
    normalizer(node) {      return {
        id: node.key,
        label: node.name,
        children: node.subOptions,
      }
    },
  }),
}

  :options="options"
  :value="value"
  :searchable="false"
  :show-count="true"
  :default-expand-level="1"
  >
  <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName, countClassName }" :class="labelClassName">
    {{ node.isBranch ? 'Branch' : 'Leaf' }}: {{ node.label }}    <span v-if="shouldShowCount" :class="countClassName">({{ count }})</span>
  </label>
</treeselect>

 export default {
  data: () => ({
    value: null,
    options: generateOptions(2),
  }),
}

<div>
  <treeselect :options="options" :value="value" :multiple="multiple">
    <div slot="value-label" slot-scope="{ node }">{{ node.raw.customLabel }}</div>
  </treeselect>
  <p>
    <label><input type="checkbox" v-model="multiple">Multi-select</label>
  </p>
</div>
export default {
 data: () => ({
    multiple: true,
    value: null,
    options: [ 1, 2, 3 ].map(i => ({
      id: i,
      label: `Label ${i}`,
      customLabel: `Custom Label ${i}`,
    })),
  }),
}

  <treeselect
    :options="options"
    :value="value"
    :searchable="false"
    @input="updateValue"
    />
  <pre class="result">{{ value }}</pre>
</div>import Vue from 'vue'import Vuex, { mapState, mapMutations } from 'vuex'import { generateOptions } from './utils'

 Vue.use(Vuex) 
const store = new Vuex.Store({
  state: {
    value: 'a',
  },
  mutations: {
    updateValue(state, value) {
      state.value = value
    },
  },
})
 
export default {
  store,
 
  data: () => ({
    options: generateOptions(2),
  }),
 
  computed: {
    ...mapState([ 'value' ]),
  },
 
  methods: {
    ...mapMutations([ 'updateValue' ]),
  },
}