vue-treeselect车辆树

使用vue-treeselect组件实现一个车辆树选择车牌号的功能

效果图

组件引入

npm i @riophae/vue-treeselect --save

import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

<treeselect
    v-model="modelValue"
    class="tree-select-dept"
    :disabled="disabled"
    :limit="1"
    :limit-text="limitTextFun"
    :multiple="multiple"
    no-children-text="暂无数据"
    no-options-text="暂无数据"
    :options="options"
    :placeholder="placeholder"
    :show-count="true"
    :style="customStyle"
    @deselect="delSelect"
    @select="onSelect"
  />

接口数据

这是后端返回的树型结构,children里面又有嵌套,核心的字段是id,label,children,每一个组织需要两部分数据,一是它下面的车牌号,二是children下级组织中的车牌号,现在进行解析数据,vue-treeselect最简单的结构如下,然后将后端给到的数据解析成如下结构即可

options: [
        {
          id: 'A',
          name: 'a',
          children: [
            {
              id: 'AA',
              name: 'aa',
              isDisabled: true
            },
            {
              id: 'AB',
              name: 'ab',
              // 默认展开
              isDefaultExpanded: true,
              children: [
                {
                  id: 'ABA',
                  name: 'aba'
                },
                {
                  id: 'ABB',
                  name: 'abb',
                  isNew: true
                }
              ]
            }
          ]
        },
        {
          id: 'b',
          name: 'b',
          children: [
            {
              id: 'ba',
              name: 'ba'
            },
            {
              id: 'bb',
              name: 'bb'
            }
          ]
        },
        {
          id: 'c',
          name: 'c'
        }
      ]

解析树型结构

requestData() {
      fetchTreeVehicleAll().then((res) => {
        this.options = res.data
        this.parseTreeData(res.data)
        console.log("deptList:", this.deptList)
      })
    },

    parseTreeData(data) {
      data.forEach(item => {
		// 组织下的车牌号
        if (item.vehicles) {
          item.vehicles.forEach(v => {
            v.type = "vehicle"
            item.children.push({
              id: v.id,
              label: v.vehicleNo,
              vehicleNo: v.vehicleNo,
              type: 'vehicle'
            })
          })
		 // 获取所有的组织和车牌号
          item.vehicles.length && this.deptList.push({
            deptId: item.id,
            label: item.label,
            vehicles: item.vehicles.map(v => {
              return {
                id: v.id,
                vehicleNo: v.vehicleNo,
              }
            })
          })
        }
		// 当前组织下的children中的数据进行递归处理
        if (item.children) {
          item.type = "dept"
          this.parseTreeData(item.children)
        }
      })
    },