VueTreeselect

使用element ui 中使用到一个类似的表格, 

 

 element ui 此时的下拉框使用起来比较费劲

 这个是个人笔记,可以去官网看具体的步骤

建议通过npm安装vue-treeselect，

npm install --save @riophae/vue-treeselect 

<template>
  <div id="app">
    <treeselect v-model="value" :multiple="true" :options="options" />
  </div>
</template>

script>
  // import the component
  import Treeselect from '@riophae/vue-treeselect'
  // import the styles
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    // register the component
    components: { Treeselect },
    data() {
      return {
        // define the default value
        value: null,
        // define options
        options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],
      }

    },
  }
</script>

 自定义选项标签

html

<treeselect
  :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>

 js

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,
      }
    },
  }),
}