若依框架中的方法来处理冰淇淋名称获取(直接调字典控制器传字典名称和字典Value查具体的字典Label)

iceName.seticeName(dictDataService.selectDictLabel("ice_colour", v.geticeName()));
根据字典type和字典Label查询字典的数据信息
    select dict_label from 若依字典表
    where dict_type = #{dictType} and dict_value = #{dictValue}

### el-tree-select 组件获取选中 value label 方法 在 `el-tree-select` 组件中,可以通过监听特定事件并结合组件属性来实现获取中的 `value` `label` 值。 #### 使用 change 事件获取选中项的值 当选项发生变化时会触发 `change` 事件,在该回函数内可以访问到当前选中的节点数据。通过递给此事件处理程序的第一个参数可以直接获得所选项目的 `value` 属性;而为了得到完整的对象信息(包括 `label`),可以在模板里设置一个引用并通过 `$refs` 访问组件实例进而用其公开的方法或读取内部状态。 ```html <template> <div> <!-- 设置ref以便后续操作 --> <el-tree-select v-model="selectedValue" :data="treeData" @change="handleChange" ref="treeSelectRef"> </el-tree-select> <p>Selected Value: {{ selectedValue }}</p> <p>Selected Label: {{ selectedLabel }}</p> </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue'; // 定义响应式变量存储选中的valuelabel const selectedValue = ref(null); let selectedLabel = ''; // 模拟树形结构的数据源 const treeData = [ { id: 1, label: "Level one 1", children: [ { id: 4, label: "Level two 1-1", disabled: true, children: [{ id: 9, label: "Level three 1-1-1" }] } ] }, ]; function handleChange(value) { const instance = this.$refs.treeSelectRef; // 遍历找到对应的node function findNodeById(data, targetId){ for(let i=0;i<data.length;i++){ if(data[i].id === targetId){ return data[i]; } if(Array.isArray(data[i].children)){ let result=findNodeById(data[i].children,targetId); if(result!==undefined){ return result; } } } } const currentNode = findNodeById(treeData,value); if(currentNode !== undefined && typeof currentNode === 'object'){ selectedLabel = currentNode.label || ''; }else{ console.error('未找到对应节点'); } } </script> ``` 上述代码展示了如何利用 `@change` 事件监听器配合自定义逻辑去匹配并更新页面上显示的选择结果[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值