vue2 el-select选择器和el-tree树控件组合使用

多选版本

<template>
  <div class="app-container" style="padding: 0">
    <el-select
      ref="selectTree"
      v-model="treeName"
      style="width: 260px"
      class="main-select-tree"
      placeholder="请选择设备名称"
      multiple
      collapse-tags
      clearable
      @clear="clearSelectInput"
    >
      <el-option
        v-for="(item, index) in formatData(treeData)"
        :key="index"
        :label="item.name"
        :value="item.value"
        style="display: none"
      />
      <el-tree
        ref="selecteltree"
        class="main-select-el-tree"
        :data="treeData"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        @check-change="handleNodeClick"
      />
    </el-select>
  </div>
</template>

<script>
export default {
  props: {
    selectValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 绑定 传递的值
      treeId: [],
      treeName: [],

      // 树 数据
      treeData: [
        {
          id: 'GG',
          name: '灌溉设备',
          order: 1,
          parentId: '-1',
          children: [
            {
              id: 'WZGG000001',
              name: '1#机井灌溉三相水泵',
              order: 1,
              parentId: 'GG'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.selecteltree.filter(val)
    }
  },
  mounted() {
  },
  methods: {
    // 递归遍历数据
    formatData(data) {
      let options = []
      const formatDataRecursive = (data) => {
        data.forEach((item) => {
          options.push({ label: item.name, value: item.id })
          if (item.children && item.children.length > 0) {
            formatDataRecursive(item.children)
          }
        })
      }
      formatDataRecursive(data)
      //   console.log('递归遍历数据', options)
      return options
    },
    // 点击事件
    handleNodeClick(data, check) {
      if (!data.children) {
        if (check) {
          this.treeId.push(data.id)
          this.treeName.push(data.name)
        } else {
          this.treeId = this.treeId.filter(function(value) {
            return value !== data.id
          })
          this.treeName = this.treeName.filter(function(value) {
            return value !== data.name
          })
        }
      } else {
        data.children.map((item) => {
          if (check) {
            this.treeId.push(item.id)
            this.treeName.push(item.name)
          } else {
            this.treeId = this.treeId.filter(function(value) {
              return value !== item.id
            })
            this.treeName = this.treeName.filter(function(value) {
              return value !== item.name
            })
          }
        })
      }

      this.treeId = [...new Set(this.treeId)]
      this.treeName = [...new Set(this.treeName)]

      //   //   this.$refs.selectTree.blur()
      this.$emit('update:selectValue', this.treeId)
    },

    // 清空事件
    clearSelectInput() {
      this.$emit('update:selectValue', [])
      // 获取 el-tree 实例的引用
      const elTree = this.$refs.selecteltree
      elTree.setCheckedKeys([])
    }
  }
}
</script>

<style lang="scss" scoped>
.main-select-el-tree .el-tree-node .is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}
.main-select-el-tree .el-tree-node.is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}

::v-deep .el-tag.el-tag--info .el-tag__close {
  display: none;
}
</style>

// 父组件中使用 
<TreeSelectZdy
    v-model="queryParams.deviceCode"
    @update:selectValue="handleSelectValueChange"
 />



    handleSelectValueChange(value) {
    //   console.log('点击选择 ...', value)
      let getValue = []
      if (value && value.length > 0) {
        getValue = value
      } else {
        getValue = []
      }
      this.queryParams.deviceCode = getValue.toString()
    },

单选版本

<template>
  <div class="app-container" style="padding: 0">
    <el-select
      ref="selectTree"
      v-model="treeName"
      style="width: 200px"
      class="main-select-tree"
      placeholder="请选择设备名称"
      clearable
      @clear="clearSelectInput"
    >
      <el-option
        v-for="(item, index) in formatData(treeData)"
        :key="index"
        :label="item.name"
        :value="item.value"
        style="display: none"
      />
      <el-tree
        ref="selecteltree"
        class="main-select-el-tree"
        :data="treeData"
        highlight-current
        node-key="id"
        :props="defaultProps"
        @node-click="handleNodeClick"
      />
    </el-select>
  </div>
</template>

<script>
import comApis from '@/api/commonApi/commonApi.js'

export default {
  props: {
    selectValue: {
      type: String,
      default: ''
    },
    deviceName: {
      type: String,
      default: ''
    },
    deviceCode: {
      type: String,
      default: ''
    },
    treeSelectIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 绑定 传递的值
      treeId: '',
      treeName: '',

      // 树 数据
      treeData: [
        {
          id: 'GG',
          name: '灌溉设备',
          order: 1,
          parentId: '-1',
          children: [
            {
              id: 'WZGG000001',
              name: '1#机井灌溉三相水泵',
              order: 1,
              parentId: 'GG'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.selecteltree.filter(val)
    },
    deviceName: {
      immediate: true, // 不管更不更新, 都会执行一次
      deep: true,
      handler: function(newV, oldV) {
        this.treeName = newV
      }
    },
    deviceCode: {
      immediate: true, // 不管更不更新, 都会执行一次
      deep: true,
      handler: function(newV, oldV) {
        this.treeId = newV
      }
    }
  },
  mounted() {
  },
  methods: {// 递归遍历数据
    formatData(data) {
      let options = []
      const formatDataRecursive = (data) => {
        data.forEach((item) => {
          options.push({ label: item.name, value: item.id })
          if (item.children && item.children.length > 0) {
            formatDataRecursive(item.children)
          }
        })
      }
      formatDataRecursive(data)
      //   console.log('递归遍历数据', options)
      return options
    },
    // 点击事件
    handleNodeClick(data, check) {
      console.log('1233', data)
      if (!data.children && data.parentId !== '-1') {
        this.treeId = data.id
        this.treeName = data.name
        this.$refs.selectTree.blur()
        this.$emit('update:selectValue', this.treeId, this.treeSelectIndex)
      }
    },
    // 清空事件
    clearSelectInput() {
      this.$emit('update:selectValue', undefined, this.treeSelectIndex)
      // 获取 el-tree 实例的引用
      const elTree = this.$refs.selecteltree
      elTree.setCurrentKey(null)
    }
  }
}
</script>

<style lang="scss" scoped>
.main-select-el-tree .el-tree-node .is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}
.main-select-el-tree .el-tree-node.is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}
</style>