vue-treeselect使用

安装插件

npm install --save @riophae/vue-treeselect

html

//appendToBody 超出不隐藏     写这个好像再修改浮层的样式就不生效了，不知道啥原因

:show-count="true"显示子节点数量   

<el-form-item label="起始地:" label-width="150px">
    <Treeselect
     v-model="value"
     class="treeSelect"
     placeholder="请选择"
     :append-to-body="true"
     :options="agencyOption"
     :normalizer="tenantIdnormalizer"
     no-options-text="暂无数据"
    />
</el-form-item>

js

<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: { Treeselect },
  data() {
    return {
      value: ''
      agencyOption: []
    }
  },
  methods: {
    // 字段默认 id label 用于规范化数据源
    tenantIdnormalizer(node, instanceId) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    }
  }
}
</script>