vue antd a-select 获取元素自定义属性值

### 实现 `a-tree-select` 自定义回填显示字段 在 `antd-design-vue` 中，可以通过设置 `labelInValue` 属性为 `true` 来获取选中项的完整信息，并通过自定义渲染函数来控制输入框中显示的内容。具体来说，可以利用 `onChange` 方法捕获选中节点的信息并动态更新输入框的显示内容。 以下是实现代码示例： ```vue <template> <a-space direction="vertical" style="width: 300px;"> <!-- TreeSelect 组件 --> <a-tree-select v-model:value="value" :tree-data="treeData" label-in-value @change="handleChange" placeholder="请选择" allow-clear /> <!-- 显示当前选中的值 --> <div>当前选中：{{ displayText }}</div> </a-space> </template> <script> export default { data() { return { value: null, // 当前选中的值 treeData: [ { title: 'Node1', key: '0-0', children: [{ title: 'Child Node1', key: '0-0-0' }] }, { title: 'Node2', key: '0-1', children: [{ title: 'Child Node2', key: '0-1-0' }] } ], displayText: '' // 输入框最终显示的文字 }; }, methods: { handleChange(selectedOption) { if (selectedOption && selectedOption.key) { const pathTitles = this.getPathTitles(this.treeData, selectedOption.key); this.displayText = pathTitles.join(' / '); // 自定义展示格式 } else { this.displayText = ''; // 清空显示文字 } }, getPathTitles(treeData, targetKey) { let result = []; function findPath(data, parentTitles = []) { for (const node of data) { const currentTitles = [...parentTitles, node.title]; if (node.key === targetKey) { result = currentTitles; return true; } if (node.children) { if (findPath(node.children, currentTitles)) { return true; } } } return false; } findPath(treeData); return result; // 返回路径上的所有标题 } } }; </script> ``` #### 解析 上述代码实现了以下功能： 1. **绑定数据源**：通过 `treeData` 定义树形结构的数据[^1]。 2. **启用 `labelInValue`**：该属性允许我们获取完整的选项对象而非仅仅是键值[^2]。 3. **处理变更事件**：当用户选择某个节点时，触发 `@change` 方法，传入选中的节点信息。 4. **递归查找路径**：调用 `getPathTitles` 函数，基于目标节点的 `key` 值，在树形结构中找到其对应的路径标题列表。 5. **拼接字符串**：将路径标题按指定分隔符 `/` 进行连接，并赋值给 `displayText` 变量用于展示。 此方法能够满足需求，即在选中某节点后，按照 “一层title/二层title” 的格式回显至输入框中。 ---