Skip to content

同时打印标题和值

:label-in-value="true"

同时获取select的value与label

treeSelect 点击文字展开子节点

效果:

vue
<template>
  <a-tree-select
    style="width: 100%"
    showSearch
    tree-node-filter-prop="label"
    v-model:value="selectValue"
    :tree-data="sysIndList"
    allowClear
    :treeExpandedKeys="treeExpandedKeys"
    @treeExpand="onTreeExpand"
  >
    <template #title="{ title, key }">
      <span @click.stop="toggleExpand(key)">{{ title }}</span>
    </template>
  </a-tree-select>
</template>
js
 methods: {
      toggleExpand(key) {
        // 点击节点标题时,切换展开状态
        const idx = this.treeExpandedKeys.findIndex((item) => item === key);
        if (idx === -1) {
          this.treeExpandedKeys.push(key); // 如果未展开,则添加到展开数组
        } else {
          this.treeExpandedKeys.splice(idx, 1); // 如果已展开,则移除
        }
      },
      onTreeExpand(expandedKeys) {
        // 同步 treeExpandedKeys 的状态
        this.treeExpandedKeys = expandedKeys;
      },
    },