el-select + el-tree下拉树_el-select el-tree

 html:

<!-- select框绑定的值是selectVal，也就是treeData里的value -->
            <el-select v-model="selectVal" placeholder="请选择..." size="mini" ref="select" style="width:100%">
              <!-- 设置一个input框用作模糊搜索选项功能 -->
              <el-input class="input" placeholder="此处键入'关键词'搜索查询" prefix-icon="el-icon-search" v-model="treeFilter" size="mini" clearable style="width:100%">
              </el-input>
              <!-- 设置一个隐藏的下拉选项，选项显示的是汉字label，值是value -->
              <!-- 如果不设置一个下拉选项，下面的树形组件将无法正常使用 -->
              <el-option hidden key="id" :value="selectVal" :label="selectName">
              </el-option>              
              <!-- 设置树形控件 @node-click="handleNodeClick"  @check-change="getSelcetNode" @check="getSelcetNode"-->
              <el-tree :data="treeData" :default-expand-all="true" show-checkbox ref="tree" @check="getSelcetNode" node-key="id" :props="defaultProps" :expand-on-click-node="false"
                :check-on-click-node="true" :filter-node-method="filterNode">
                <!-- @node-click：树形控件选项点击事件 -->
                <!-- :expand-on-click-node：使树形控件只有点箭头图标的时候才会展开或者收缩节点，为false则点文字直接选中该项 -->
                <!-- :check-on-click-node：是否在点击节点的时候选中节点，当选项为复选框时有用，这个属性可以删除 -->
                <!-- :default-expand-all：默认展开所有节点 -->
                <!-- :filter-node-method：实现搜索功能的筛选方法 -->
 
                <span slot-scope="{ data }">
                  <!-- 选项用插槽来显示，匹配搜索功能，并方便增加tag标签需求 -->
                  <span>{{ data.label }}</span>
                  <el-tag size="mini" style="margin: 0 10px" v-show="filterorgType(data.tag)">{{ filterorgType(data.tag) }}</el-tag>
                </span>
              </el-tree>
            </el-select>

data:

data() {
    return {
      selectVal: '', // select框的绑定值
      selectName: '', // select框显示的name
      treeFilter: '', // 搜索框绑定值，用作过滤
      // 树形控件数据
      treeData: [
        {
          value: '1',
          label: '运输管理',
          tag: 'TMS',
          children: [
            {
              value: 'tms_dispatch',
              label: '调度单',
            },
            {
              value: 'tms_led',
              label: '配送单',
            },
            {
              value: 'tms_led_dtl',
              label: '配送单明细',
            },
            {
              value: 'tms_order',
              label: '订单',
            },
            {
              value: 'tms_order_dtl',
              label: '订单明细',
            },
            {
              value: 'tms_shipment',
              label: '运单',
            },
          ],
        },
        {
          label: '仓储管理',
          value: '2',
          tag: 'WMS',
          children: [
            {
              value: 'wms_into_order',
              label: '入库单',
            },
            {
              value: 'wms_into_order_dtl',
              label: '入库单明细',
            },
            {
              value: 'wms_out_order',
              label: '出库单',
            },
            {
              value: 'wms_out_order_dtl',
              label: '出库单明细',
            },
            {
              value: 'wms_owner_order',
              label: '货权转移单',
            },
            {
              value: 'wms_owner_order_dtl',
              label: '货权转移单明细',
            },
            {
              value: 'wms_tally_order',
              label: '理货单',
            },
            {
              value: 'wms_tall_order_dtl',
              label: '理货单明细',
            },
            {
              value: 'wms_transfer_order',
              label: '库存调拨单',
            },
            {
              value: 'wms_transfer_order_dtl',
              label: '库存调拨单明细',
            },
            {
              value: 'tms_order_dtl',
              label: '订单明细',
            },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      // 标签数组
      tagList: [
        { value: 'TMS', label: 'TMS' },
        { value: 'WMS', label: 'WMS' },
      ],
    }
}

methods: {
 
    // 复选框选中事件
    getSelcetNode(data, selStatus) {
      if (selStatus.checkedKeys.length != 0) {
        let arr1 = []
        let arr2 = []
        selStatus.checkedNodes.forEach((item, index) => {
          if (item.value != null) {
            arr1.push(item.value)
            arr2.push(item.label)
          }
        })
        this.selectVal = arr1.join(',')
        this.selectName = arr2.join(',')
      } else {
        this.selectVal = ''
        this.selectName = ''
      }
    },
 
// 模糊查询（搜索过滤），实质为筛选出树形控件中符合输入条件的选项，过滤掉其他选项
    filterNode(value, data) {
      if (!value) return true
      let filterRes = data.label.indexOf(value) !== -1
      return filterRes
    },
    // 选项卡标签（可忽略，增值迭代需求）
    filterorgType(val) {
      let arr = this.tagList.filter((item) => {
        return item.value == val
      })
      return arr.length ? arr[0].label : ''
    },
    selectChange(e) {
      if (e == '') {
        this.selectVal = ''
        this.selectName = ''
 
        this.$refs.tree.setCheckedKeys([])
      }
    },
}