Vue2-tree（树形结构）

前言：前段时间产品提出一个需求，下拉选择一个值分别对应树形结构的层级，不对应的层级禁止选择、树形数据为父子不关联。

简单梳理一下：

项目级别与区域层级对应：

学校项目：区域层级到学校

区县项目：区域层级到区县

市级项目：区域层级到市

省级项目：区域层级到省

首先，我们看下效果视频，更直观理解：

好，废话不多说直接上代码

ui组件库：Element

树形选择器组件：Treeselect

template：

<el-form-item label="项目级别：" prop="projectLevel">
            <el-select v-model="projectInfo.projectLevel" placeholder="请选择" style="width:100%;"
                       @change="handleChange">
              <el-option
                v-for="item in projectLevelList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

<el-form-item label="所属区域：" prop="areaId">
            <div @click="handleOpen">
              <treeselect
                v-model="projectInfo.areaId"
                :flat="true"
                :normalizer="normalizer"
                :options="areaTreeData"
                placeholder="请选择"
                @input="handleInput"
              />
            </div>
          </el-form-item>

项目级别方法：

handleChange (el) {
      this.projectInfo.areaId = null //因为是一一对应，所以值发生变化需要赋值null
      switch (el) {
        case '省级项目':
          this.num = 0  //声明num变量为层级意思 来对应树形结构的层级
          break
        case '地市项目':
          this.num = 1
          break
        case '区县项目':
          this.num = 2
          break
        case '学校项目':
          this.num = 3
          break
      }
      this.getAreaTree() //这里必须要调用树形数据接口
    }

所属区域方法：

normalizer (node) {
      // 去掉children=[]的children属性
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children,
        isDisabled: (node.userAreaSign ? false : true) || (node.level == this.num ? false : true)
      }

    },

创作不易多多支持！！！

Vue2-tree（树形结构）

template：

猜你喜欢