首页 > 其他分享 >TreeSelect 树形选择 选中子级显示所有父级及本身

TreeSelect 树形选择 选中子级显示所有父级及本身

时间:2023-06-27 09:15:25浏览次数:49  
标签:node obj 父级 视图 选中 子级 treeNode TreeSelect

由于需求的需要,需要在选中二级的时候,将全部路径完整的在输入框显示:如图所示

 看了一下,tree自带的属性没有此功能,经过一番思考,直接可以给绑定的model赋值的操作实现,代码如下:

<template>
  <el-tree-select :disabled='props.disabled' ref='treeRef' node-key='value' :props="treeProps" v-model='treeVal' :data='props.data' @change='change' :render-after-expand="false" @node-click='nodeClick' :check-strictly='props.checkStrictly'
                  filterable/>
</template>

js代码如下:

function nodeClick(node,treeNode) {
  if(node && node.latitude){//一级
    let obj = {
      father:treeNode.parent.data.label,
      ...node
    }
    emit("getTreeVal",obj)
    nextTick(()=>{
      treeVal.value = `${obj.father}/${obj.label}`
    })
  }
}

要在dome更新视图后才能给它赋值,不然视图时不会变化的

标签:node,obj,父级,视图,选中,子级,treeNode,TreeSelect
From: https://www.cnblogs.com/hhcome/p/17507731.html

相关文章

  • mysql 递归查询父级下的所有子级
    有一张组织表,该表有上下层级,使用mysql递归查询某个组织下的所有子组织,sql要怎么写?假设这张表名为organization的表,其结构如下:CREATETABLEorganization(idINTPRIMARYKEY,nameVARCHAR(50),parent_idINT);表里插入了几条数据INSERTINTO`organization`(`......
  • Vue通用下拉树组件@riophae/vue-treeselect的使用
    vue-treeselect是一款下拉树通用组件。@riophae/vue-treeselect是一个基于Vue.js的树形选择器组件,可以用于选择树形结构的数据。它支持多选、搜索、异步加载等功能,可以自定义选项的样式和模板。该组件易于使用和扩展,适用于各种类型的项目。npm:https://www.npmjs.com/package/@......
  • vue <treeSelect标签中树形选择返回非必填调整以及清内存需手动清理
    绑定必须相同 校验规则需trigger我这边用的是change(数据发生改变时发生变化触发),原来用的blur(失去焦点时触发)如上解决了我此次第一次选择完数据还报非必填问题 清理缓存手动清理了一下dataform中的gcl的数据要不然新增完事后还会返回数据 ......
  • Element UI el-menu菜单 子级选中后,删除父级下划线
    1.子级选中,父级也选中样式修改: .el-submenu.is-active>.el-submenu__title {color:#FFFFFF;background-color:#7E8796!important;}2.子级选中后,父级有下划线,可以通过以下样式修改去除下划线 .el-menu--horizontal>.el-submenu.el-submenu__title ......
  • 一次查找分子级Bug的经历,过程太酸爽了
    “Debuggingisliketryingtofindaneedleinahaystack,excepttheneedleisalsomadeofhay.”Debug调试就像是在大片的干草堆中找针一样,只不过针也是由干草制成的。在软件开发的世界里,偶尔会出现一些非常隐蔽的Bug,这时候工程师们像探险家一样,需要深入代码的丛林,寻找......
  • spring cloud、gradle、父子项目、微服务框架搭建---搭建父子级多模块项目,并注册到Eu
    一、新建一个父级gradl模块1.在桌面或新建文件里面,右键,打开IDEA选择Flie>NEW>Module选择Gradle,选择ModuleSDK1.8,选择Java创建完成后,idea中会多出一个项目,如下图示例然后直接关闭当前idea,进入刚才创建好的文件下,再次打开项目可以直接删除src目录二、新建子级gradl模......
  • el-table树形数据勾选框子父级联
    element官网并没有配置树形数据勾选子父级联的配置,要想实现可以借助select、select-all事件和toggleRowSelection方法实现。select事件:点击查看代码onCheck(selection,row){if(!this.isTreeData)returnletstate=row.select?false:true......
  • MySQL 级联查询所有父级
    表结构:idnamecodeparent_code1老板A 2总经理BA3项目总监CB4开发工程师DC      查询D开发工程师的所有上级:SELECT`name`,@`code`ASc_ids,(SELECT@`code`:=parent_codeFROMdepartWHERE`code`=@`code`)ASp_id......
  • 解决子级用css float浮动 而父级div没高度不能自适应高度
    解决子级对象使用cssfloat浮动而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法。当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因。如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍。方法一:对父......
  • 绝对定位——父级无定位
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatib......