elementui之el-select和el-tree的合并使用单选

  <el-form-item label="所属分类">
            <el-select
              v-model="selectTreeText"
              placeholder="请选择"
              :popper-append-to-body="false"
              class="select-tree"
              style="width:250px"
              @change="selectChange"
            >
              <el-option style="height: auto;">
                <!-- option展开高度太小，把height设置为auto就好啦 -->
                <el-tree
                  ref="tree"
                  :data="treeData"
                  node-key="id"
                  accordion
                  highlight-current
                  :props="defaultProps"
                  icon-class="el-icon-arrow-down"
                  @node-click="nodeclick"
                />
              </el-option>
            </el-select>

  return {
      selectTreeText: '',
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
 temp: {
        id: '',
        name: '',
        courseTypeID: '',
        sortNumber: '1',
        remarks: ''

      },
}

getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    },
    // select框值改变时候触发的事件
    selectChange(e) {
      var arrNew = []
      var dataLength = this.selectTreeValue.length
      var eleng = e.length
      for (let i = 0; i < dataLength; i++) {
        for (let j = 0; j < eleng; j++) {
          if (e[j] === this.selectTreeValue[i].label) {
            arrNew.push(this.selectTreeValue[i])
          }
        }
      }
      this.$refs.tree.setCheckedNodes(arrNew) // 设置勾选的值
    },
    nodeclick(data) {
      this.temp.courseTypeID = data.id
      this.selectTreeText = data.title
    },

<style lang="scss">
	.select-drop-down {
		position: relative;
	}

	.select-tree {
		.el-select-dropdown__item {
			padding: 0 10px;
		}

		.el-select-dropdown__item.hover,
		.el-select-dropdown__item:hover {
			background: transparent;
		}

		.el-tree-node__content {
			position: relative;
			// padding: 0 10px !important;
			// background-color: #f0f0fd;
		}

		// .el-tree-node__children {
		//   padding-left: 16px;
		//   background: #ccc !important;
		// }
		.expanded.el-tree-node__expand-icon.el-icon-arrow-down {
			position: absolute;
			top: 0;
			right: 0;
		}

		.el-tree-node__expand-icon {
			position: absolute;
			top: 0;
			right: 0;
		}

		.el-tree-node__expand-icon.expanded {
			transform: rotate(-180deg);
		}

		// .el-tree-node {
		//   padding: 0 10px;
		// }
	}
</style>