vue Treeselect 选择部门下拉树实现

vue Treeselect 选择部门下拉树实现

首先下载一个插件（真香系列）

第一步 ---------- npm 下载

npm install --save @riophae/vue-treeselect

第二步 ---------- npm 下载

问题一 ：
我们可以将他们显示出来 可是有时候后台传过来的数组结构不一定是id， label ，children ，显示
这样我们可以给他们添加个属性 :normalizer="normalizer"

<Treeselect
        :options="options"
        :normalizer="normalizer"
        placeholder="请选择..."                   
        v-model="addEventForm.parentId"/>

这是normalizer的方法 （就相当于函数执行）
//后台返回的数据如果和Vue Treeselect要求的数据结构不同，需要进行转换
normalizer(node){
     
    //将里面children=[]为空的时候去掉（如果不加的这句的话 如果里面children属性值为空 数状选择器里就给他默认有下一层  可里面没有所以显示空数据）
    
    if(node.children && !node.children.length){
     
        delete node.children;
    }
    // 将后台传来的数组进行修改
    return {
     
        id: node.id,
        label:node.name,
        children:node.children
    }
}

问题二 ：
当我们想获取到选择到当前id的怎么办 添加 @select="selectDepart"属性

// 在模板中添加@select属性
  <treeselect 
        :options="deptTree"
         :normalizer="normalizer"
          @select="selectDepart">

//在方法中添加事件打印出值
selectDepart(val) {
     
      console.log(val) // 打印的是个对象
      console.log(val.id) // 打印出当前选中的id
}

问题三：如果不选择值会出现unknown 这样的话

把v-modle绑定的值设为null，必须是null，初始化的时候才不会出现unknown。