vue3+elementplus选择下拉树形控件自带上级节点示例代码

PS：跟版本有关系，，实测：2.13.1版本的element-plus可以，，，但是低版本不行，，测试了如2.2.32版本的element-plus就不行，，低版本回显不了上级路径

<!-- AreaSelect.vue -->
<template>
  <el-form :model="queryForm" label-width="100px">
    <el-form-item label="管理片区">
      <!-- 1. v-model 仍绑叶子 value -->
      <el-tree-select
        v-model="queryForm.area"
        :data="areaTree"
        check-strictly
        clearable
        placeholder="请选择片区"
        style="width: 260px"
        @node-click="onNodeClick"
      >
        <!-- 关键：把输入框文字强行换成 areaLabel -->
        <template #label="{ node }">
          {{ areaLabel || node.data.label }}
        </template>
      </el-tree-select>
    </el-form-item>
  </el-form>

  <el-button type="primary" @click="handleSearch">查询</el-button>
  <el-button @click="reset">重置</el-button>

  <pre v-if="queryForm.area">提交参数：{{ queryForm }}</pre>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'

/* ---------- 表单 ---------- */
const queryForm = reactive({
  area: ''          // 仅保存叶子 value
})
const areaLabel = ref('')   // 中文路径，用来回显

/* ---------- 四级树 ---------- */
const areaTree = [
  {
    value: '华北',
    label: '华北',
    children: [
      {
        value: '北京',
        label: '北京',
        children: [
          {
            value: '朝阳',
            label: '朝阳',
            children: [
              { value: 'CBD', label: 'CBD' },
              { value: '三里屯', label: '三里屯' }
            ]
          },
          {
            value: '海淀',
            label: '海淀',
            children: [
              { value: '中关村', label: '中关村' },
              { value: '五道口', label: '五道口' }
            ]
          }
        ]
      }
    ]
  },
  {
    value: '西北',
    label: '西北',
    children: [
      {
        value: '陕西',
        label: '陕西',
        children: [
          {
            value: '西安',
            label: '西安',
            children: [
              { value: '雁塔', label: '雁塔' },
              { value: '碑林', label: '碑林' }
            ]
          }
        ]
      }
    ]
  }
]

/* ---------- 树节点点击 ---------- */
const onNodeClick = (data, node) => {
  const chain = []
  let p = node
  while (p && p.level > 0) {
    chain.unshift(p.data.label)
    p = p.parent
  }
  const fullPath = chain.join('>>')

  queryForm.area = data.value   // 叶子 value
  areaLabel.value = fullPath    // 中文路径
}

/* ---------- 业务按钮 ---------- */
const handleSearch = () => {
  ElMessage.success(`即将提交叶子 value：${queryForm.area}`)
}

const reset = () => {
  queryForm.area = ''
  areaLabel.value = ''
}
</script>