element-plus for SelectTree 树选择

<template>
  <el-popover
    popper-class="el-popover-select"
    placement="bottom"
    :width="`${width - 22}px`"
    trigger="click"
    v-model:visible="visible"
    @show="showStatus = true"
    @hide="showStatus = false"
  >
    <el-tree
      class="el-select-tree"
      ref="tree"
      node-key="id"
      highlight-current
      :style="`width: ${width - 22}px`"
      :data="treeData"
      :props="defaultProps"
      :default-expand-all="expandAll"
      :expand-on-click-node="false"
      @node-click="handleNodeClick"
    />
    <template #reference>
      <el-input
        class="el-select-input"
        readonly
        :style="`width: ${width}px`"
        :suffix-icon="ArrowDown"
        v-model="selected"
        :class="{ rotate: showStatus }"
        :placeholder="placeholder"
        :size="size"
      />
    </template>
  </el-popover>
</template>

<script>
import { defineComponent, reactive, toRefs, ref, onMounted } from "vue";

import { ArrowDown } from "@element-plus/icons";

export default defineComponent({
  name: "SelectTree",
  components: {
    ArrowDown,
  },
  props: {
    modelValue: {
      type: [Number, String],
      default: "",
    },
    treeData: {
      type: Object,
      required: true,
    },
    width: {
      type: [Number, String],
      default: "230",
    },
    expandAll: {
      type: Boolean,
      default: true,
    },
    placeholder: {
      type: String,
      default: "请选择...",
    },
    size: {
      type: String,
      default: "medium",
    },
    defaultProps: {
      type: Object,
      default: {
        children: "children",
        label: "label",
      },
    },
  },
  setup(props, { emit }) {
    const tree = ref();
    const state = reactive({
      visible: false,
      showStatus: false,
      selected: "",
    });

    const defaultSelected = (value, data) => {
      data.filter((item) => {
        if (item.id == value) {
          state.selected = item.title;
        } else if (item.children) {
          defaultSelected(value, item.children);
        }
      });
    };

    defaultSelected(props.modelValue, props.treeData);

    const handleNodeClick = (data) => {
      state.visible = false;
      state.selected = data[props.defaultProps.label];
      emit("update:modelValue", data.id);
    };

    onMounted(() => {
      tree.value.setCurrentKey(props.modelValue);
    });

    return {
      ...toRefs(state),
      ArrowDown,
      handleNodeClick,
      tree,
    };
  },
});
</script>

<style>
.select-tree {
  padding: 0 10px;
}

.el-select-tree .el-tree-node__content {
  height: 34px;
}

.el-select-input .el-input__inner,
.el-select-input .el-input__suffix {
  cursor: pointer;
}

.el-select-input.rotate .el-input__suffix {
  transform: rotate(-180deg);
}
</style>