treeselect组件处理后端返回的数据无children的情况

vue-treeselect树形选择器
treeSelect是Vue的一个插件，用于进行一个树形选择的场景，这个组件可以满足大部分场合的使用。
官网是https://www.vue-treeselect.cn/

   <treeselect
            v-model="formData[item.props]"
            :multiple="false"
            :options="options"
            :normalizer="normalizer"
           
           
          />

options是后端返回的数据，是个数组，如果后端返回的数据里有children但children不符合我们的需求，我们可以在normalizer如下配置：

data() {
	return {
	    options:[ ],
		normalizer(node){
	        //去掉children=[]的children属性 respectively
	        if(node.children && !node.children.length){
	          delete node.children;
	        }
	        return {
              id: node.id,
              pid: node.pid,
              parent: node.pid,
              value: node.id,
              label: node.permiss_name,
              name: node.permiss_name
            }
      }
	}
}

由于后端返回的数组对象里有id及父级的id (pid)

import { genTree } from "@/libs/utils.js";
export default {
   data(){
    return {

   },
   methods:{
      getPidData() {
         const obj = {
           page_size: 9999,
           page: 1,
           permiss_name: ""
         };

        getMenuList(obj)
          .then(res => {
             this.options = genTree(res.data.list);
          })
         .catch(err => {});
    },
   }
  }

 
}

这里我们通过调用自己封装的genTree方法对其处理,genTree方法如下：

export function genTree(data) {
  const result = []
  if (!Array.isArray(data)) {
    return result
  }
  data.forEach((item) => {
    // delete item.children
    item.children = []
  })
  const map = {}
  data.forEach((item) => {
    item.label = item.name
    if (item.fullname) {
      item.label = item.fullname
    }
    item.value = item.id
    map[item.id] = item
  })
  data.forEach((item) => {
    const parent = map[item.pid]
    if (parent) {
      ;(parent.children || (parent.children = [])).push(item)
    } else {
      result.push(item)
    }
  })
  return result
}

这里需要注意的是，如果后端返回的父级id字段不是pid，而是别的字段，比如parentId，那我们genTree方法里const parent = map[item.pid] 就需要改成const parent = map[item.parentId]