vue-treeselect组件使用

官网传送门

1. 安装依赖

npm install --save @riophae/vue-treeselect

2. 引入组件

<template>
</template>

<script>
  // 引入组件
  import Treeselect from '@riophae/vue-treeselect'
  // 引入样式
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    // 注册组件
    components: { Treeselect },
    data() {
      return {}
    },
  }
</script>

3. template中添加组件

<template>
  <div id="app">
    <treeselect 
      v-model="value" 
      :multiple="true" 
      :options="options" 
      placeholder="请选择"
      noChildrenText="暂无数据"
      noOptionsText="暂无数据"
      noResultsText="暂无数据"
      flattenSearchResults="true"
      :normalizer="normalizerTree"
    />
  </div>
</template>

<script>
  // 引入组件
  import Treeselect from '@riophae/vue-treeselect'
  // 引入样式
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    // 注册组件
    components: { Treeselect },
    data() {
      return {
        // 定义默认有效值
        value: null,
        // 定义options
        options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],
        normalizerTree(node) {
          if (node.children && !node.children.length) {
            delete node.children
          }
          return {
            id: node.id,
            label: node.label,
            children: node.children
          }
        }
      }
    },
  }
</script>

4. 添加方法

<template>
  <div id="app">
    <treeselect 
      v-model="value" 
      :multiple="true" 
      :options="options" 
      placeholder="请选择"
      noChildrenText="暂无数据"
      noOptionsText="暂无数据"
      noResultsText="暂无数据"
      flattenSearchResults="true"
      :normalizer="normalizerTree"
      @input="handleChange"
    />
  </div>
</template>

<script>
  // 引入组件
  import Treeselect from '@riophae/vue-treeselect'
  // 引入样式
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    // 注册组件
    components: { Treeselect },
    data() {
      return {
        // 定义默认有效值
        value: null,
        // 定义options
        options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],
        normalizerTree(node) {
          if (node.children && !node.children.length) {
            delete node.children
          }
          return {
            id: node.id,
            label: node.label,
            children: node.children
          }
        }
      }
    },
    methods: {
      handleChange() {
        //根据当前有效值添加操作
        console.log(this.value)
      }
    }
  }
</script>

5. 重新定义颜色

/deep/ .vue-treeselect__multi-value-item {
  color: green;
}
/deep/ .vue-treeselect__value-remove {
  color: green;
}
/deep/ .vue-treeselect .vue-treeselect__control:focus-widthin {
  border: green;
  box-shadow: 0 0 2pcx 2px green;
}
/deep/ .vue-treeselect .vue-treeselect__checkbox--checked {
  border: green;
  background: green;
}
/deep/ .vue-treeselect .vue-treeselect__checkbox--checked:hover {
  border: green;
  background: green;
}
/deep/ .vue-treeselect .vue-treeselect__checkbox--indeterminate{
  border: green;
  background: green;
}
/deep/ .vue-treeselect .vue-treeselect__checkbox--indeterminate:hover {
  border: green;
  background: green;
}
/deep/ .vue-treeselect .vue-treeselect__label--container:hover  .vue-treeselect__checkbox--checked{
  border: green;
  background: green;
}
/deep/ .vue-treeselect .vue-treeselect__label--container:hover  .vue-treeselect__checkbox--indeterminate{
  border: green;
  background: green;
}
/deep/ .vue-treeselect .vue-treeselect__label--container:hover  .vue-treeselect__checkbox--unchecked{
  border: green;
}