Vue 下拉框改树下拉框 [el-select] [tree]

        项目需要一个树形下拉框，网上搜了下，发现与Vue的下拉框存在不同，如清空选项的叉叉按钮位置不同，所以自己整出了下面这个东西

<template>

  <div>

    <el-form label-position="right" label-width="110px" style="width: 100%;">

      <el-row>

        <el-col :span="6">

          <el-form-item label="省/市：">

            <el-select v-model="label" filterable :filter-method="dataFilter" @visible-change="resetTreeQuery" clearable placeholder="请选择" ref="select">

              <el-option :value="id" style="height: auto; padding: 0px; font-weight: normal;">

                <el-tree :data="treeData" node-key="id" default-expand-all :expand-on-click-node="false" ref="tree"

                  :props="Props" @node-click="nodeClick" :filter-node-method="filterNode">

                </el-tree>

              </el-option>

            </el-select>

          </el-form-item>

        </el-col>

      </el-row>

    </el-form>

  </div>

</template>

 

<script>

  export default {

  data() {

      return {

        label: '',//用来接树选中的label

        id: '',//用来接树选中的id

        treeData: [

          {label:"北京",id:"1"},

          {label:"浙江",id:"2",children:[

            {label:"杭州",id:"3"},

            {label:"宁波",id:"4"}

          ]},

          {label:"深圳",id:"5"}

        ],

        Props: {

          label: 'label' // 标签显示

        }

      }

    },

    methods: {

      filterNode(value, data) {

        if (!value) return true

          return data.label.indexOf(value) !== -1

      },

      nodeClick(node) { //

        let code = node[this.Props.label] //取object的value

        this.label = node.label

        this.id = node.id

        console.log("nodeClick",node)

        this.$refs.select.blur()//主动使下拉框失去焦点隐藏选项

      },

      resetTreeQuery(val){

        if(val)

          this.$refs.tree.filter("")//重置树查询

      },

      dataFilter(val){

        this.$refs.tree.filter(val)

      }

    }

  }

</script>