问题描述

出现情况如下图，全部飘蓝色这个归属部门框，并且不能正常使用的TreeSelect,v-model绑定的值拿不到，笔者踩了一上午的坑特此记录一下，给后人一个经验

笔者也是考虑了：riophae/vue-treeselect，这个确实是好用，比ElementPlus的TreeSelect好用，但是人家是vue2的，我们这里引入会报错，所以另外找方案，就耐下心来好好研究了一下这个ElementPlus的TreeSelect

技术栈

技术栈基于：vue3.0 + ts + ElementPlus

归属部门框源代码

<el-col :span="12">
    <el-form-item
      label="归属部门"
      prop="deptId"
    >
      <el-tree-select
        v-model="formData.deptId"
        placeholder="请选择所属部门"
        :data="deptOptions"
        :show-count="true"
      />
    </el-form-item>
</el-col>

这是为什么呢，原来是我的formData.deptId匹配不到deptOptions里面的值，所以全部亮蓝色，那么我直接告诉formData.deptId为null这个初始问题得到了解决

formData: {
    status: "0",
    deptId: null
} as UserFormData,

但是当我选择一个部门的时候它又出现了飘蓝的问题

仔细研究发现,官网给的data属性是这样的，ElementPlus的TreeSelect

const data = [{
    value: '1',
    label: 'Level one 1',
    children: [
      {
        value: '1-1',
        label: 'Level two 1-1',
        children: [
          {
            value: '1-1-1',
            label: 'Level three 1-1-1',
          },
        ],
      },
    ]
}]

而后端返回给我的树结构是这样的

[
  {
    "id": 100,
    "label": "若依科技",
    "children": [
      {
        "id": 101,
        "label": "深圳总公司",
        "children": [
          {
            "id": 103,
            "label": "研发部门"
          }
    ]
  }
]

终于发现原来是官网需要的value属性，我这里是id属性，所以这是飘蓝也是v-model拿不到值得原因，那么写一个递归函数来改变一下

interface DeptOptions {
  value:number;
  label:string;
  children?:DeptOptions[];
}
// 加工部门树结构将id换成value属性的值
function factoryDeptOptions(arr: any): DeptOptions[] {
  let newArr: DeptOptions[] = []
  if (Array.isArray(arr)) {
    arr.forEach((item) => {
      let obj: DeptOptions = {
        value: 0,
        label: ''
      }
      obj.value = item.id
      obj.label = item.label
      if (item.children && Array.isArray(item.children)) {
        obj.children = factoryDeptOptions(item.children)
      }
      newArr.push(obj)
    })
  }
  return newArr
}

调用一下上面的方法，然后形成新的结构，给el-tree-select的data属性,好了到此解决问题

state.newDeptOptions = factoryDeptOptions(response.data)
<el-col :span="12">
    <el-form-item
      label="归属部门"
      prop="deptId"
    >
      <el-tree-select
        v-model="formData.deptId"
        placeholder="请选择所属部门"
        :data="newDeptOptions"
        :show-count="true"
      />
    </el-form-item>
</el-col>

虽然不是特别好用，但是能满足现在的需求。。