vue-treeselect使用案例

https://vue-treeselect.js.org/

父子节点没有关联

<TreeSelect
          flat
          style="background-color: #0e3977"
          placeholder="请选择"
          v-model="org" :multiple="true" :options="state.orgData" />

// import the component
import TreeSelect from 'vue3-treeselect'
// import the styles
import 'vue3-treeselect/dist/vue3-treeselect.css'

实现特殊情况下只能选择叶子节点

<treeselect
        v-model="treeValue"
        :options="getOptions"
        flat
        value-consists-of="BRANCH_PRIORITY"
        :disableBranchNodes="true"
        >
    </treeselect>

设置当children为空的时候不展示占位提示

export const normalizer = (node) => {
    return{
        children: node.children && node.children.length > 0 ? node.children: 0,
    }
}


  <el-form-item label="被侵权所在单位">
    <TreeSelect
      class="export-button"
      :searchable="false"
      placeholder="请选择"
      :normalizer="normalizer"
      v-model="state.inputUnit"
      :options="dictObj.inputUnitOpts"
      :multiple="false"
      no-options-text="暂无数据"
      no-children-text="暂无数据"
      noResultsText="暂无匹配项"
      ref="treeSelectRef"
    />
  </el-form-item>