treeselect的value取name

如何在 TreeSelect 中通过名称获取值
为了实现根据名称获取 TreeSelect 组件中的值，可以采用多种方法取决于所使用的具体库和技术栈。以下是几种常见的方式：
对于 Ant Design 的 TreeSelect
对于 Ant Design 提供的 TreeSelect 组件，可以通过遍历树形数据来匹配目标节点并提取其对应的 value 属性。
// 假设 treeData 是传递给 TreeSelect 的原始数据数组
function findValueByName(treeData, targetName) {
let result;

function traverse(nodes) {
nodes.forEach(node => {
if (node.title === targetName || node.value.toString() === targetName) { // 支持按 title 或者 value 查找
result = node.value;
return;
}

if (node.children && Array.isArray(node.children)) {
traverse(node.children);
}
});

return result !== undefined;
}

traverse(treeData);

return result;
}
登录后复制
此函数接受两个参数：一个是完整的树状结构数据 (treeData)；另一个是要查询的目标名称(targetName)。它会递归地遍历整个树直到找到第一个符合条件的节点，并返回该节点关联的 value[^4]。
Vue.js 和 vue-treeselect 插件
当使用的是基于 Vue.js 构建的应用程序以及 vue-treeselect 这样的第三方组件时，则可以直接操作内部状态或监听特定事件来进行处理。
如果想要直接访问某个选项的信息而不需要触发任何交互行为的话，可以在模板外编写辅助函数用于解析当前绑定到组件上的 options 列表:
methods: {
getValueFromLabel(labelText) {
const option = this.deptOptions.find(option => option.label === labelText);
return option ? option.id : null;
},
},
登录后复制
这段代码片段展示了如何定义一个名为 getValueFromLabel 的方法，在其中查找与给定标签文本相匹配的第一个项目，并返回该项目的 ID（即 value）。请注意这里的属性名可能依据实际 API 文档有所不同[^5]。
Sys:treeselect 自定义方式
针对 JSP 页面上常见的 sys:treeselect 控制器，默认情况下并没有提供直接按照显示文字检索的功能。但是可以根据 HTML 渲染后的 DOM 结构手动定位所需元素。通常来说，这些控件最终会被渲染成一系列带有唯一标识符（如 id 或 data-id）的标准 <input> 字段或其他可选标记。因此，只要知道了确切的选择路径就可以轻松读取相关内容。
例如，假设已知某棵树下有一个子项叫 "exampleItem" 并希望得到它的编号作为输入框的内容填充进去：
<!-- 部分简化版HTML -->
<div class="layui-input-block">
<select lay-filter="memberTreeselect"></select>
</div>

<script type="text/javascript">
$(document).ready(function(){
$('#someButton').click(() => {
var selectedOption = $('option:selected', 'select[lay-filter="memberTreeselect"]').filter((_, el) => $(el).text().trim() === 'exampleItem');
console.log(selectedOption.val());
})
});
</script>
登录后复制
上述脚本会在按钮被点击的时候执行一次筛选过程，寻找所有处于选定状态下且文本等于 "exampleItem" 的 <option> 元素，并打印出它们各自的 value 属性值[^3]。