首页 > 其他分享 >el-cascader设置选中默认值

el-cascader设置选中默认值

时间:2022-10-10 15:48:07浏览次数:49  
标签:node el parentList platform 选中 cascader 默认值 data 节点

 

 业务需求:点击左侧树,右边点击上传按钮后弹出页面默认选中左侧选中的节点

步骤:1、定义数组 parentList:[];

           2、点击左侧时,获取选中节点及所有父节点,赋值给parentList;

<el-tree
            :data="picOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />

js

// 节点单击事件
    handleNodeClick(data,node) {
      this.parentList = [];
      let a;
        a = {
          tradeId:data.id,
        }
      this.handleQueryTree(a);
      this.platform(node);
    },
    platform(node) {
      if (!node.parent) {// 若无父节点,则直接返回
        return
      }
      this.parentList.unshift(node.data.id)// 将value保存起来
      //调用递归
      this.platform(node.parent);
    }

           2、点击右侧新增按钮时,赋值给标签元素

 <el-cascader :options="picOptions" :show-all-levels="true" :props="{value:'id'}" v-model="form.pictureType"></el-cascader>

js,赋值

uploadCli(){
      this.reset();
      this.upload.open = true;
      this.form.pictureType = this.parentList;

    },

 

标签:node,el,parentList,platform,选中,cascader,默认值,data,节点
From: https://www.cnblogs.com/person008/p/16775945.html

相关文章

  • nginx启停shell脚本
    #!/bin/bash#编写nginx启动脚本#本脚本编写完成后,放置在/etc/init.d/目录下,就可以被Linux系统自动识别到该脚本#如果本脚本名为/etc/init.d/nginx,则servic......
  • elementui中的el-table,(prop对应多个属性)中拼接两个列表字段并展示
     elementui中的el-table,(prop对应多个属性)中拼接两个列表字段并展示 <el-table-columnprop="pa_dt_name,pa_duty_name"label="职称|职务"><templatev-slot="sc......
  • FinalShell - SSH工具
    官网:http://www.hostbuf.com/ Windows版下载地址:http://www.hostbuf.com/downloads/finalshell_install.exe  ......
  • el-pagination size下拉框展开时页面出现双层滚动条问题
    由于项目中给内容区域设置了单独的滚动条,无需body出现滚动条,当分页选项的下拉框展开时,出现了双层滚动条的效果不展开时的滚动条效果:  展开时的滚动条效果   ......
  • IfcSegmentIndexSelect
    IfcSegmentIndexSelect类型定义IfcSegmentIndexSelect提供指向点列表的不同索引列表的选择。注:选择类型用于IfcIndexedPolyCurve指向IfcCartesianPointList,以提供多段曲......
  • 使用shell脚本上传文件至阿里云OSS(无需装任何sdk)
      #!/bin/bashhost="oss-cn-hangzhou.aliyuncs.com"bucket="bucket"#BucketNameid="id"#AccessKeyIdkey="key"#AccessKeySecretosshost=$bucket.$host......
  • Go_Channel详解
    一channel介绍单纯地将函数并发执行是没有意义的。函数与函数间需要交换数据才能体现并发执行函数的意义。虽然可以使用共享内存进行数据交换,但是共享内存在不同的gorou......
  • elasticsearch优化
    9.9elasticsearch优化1分片和副本ElasticSearch6以后设置索引的默认分片数和副本数已经不在elasticsearch.yml文件中了,而是使用了索引模板的方式配置。官方文档:https:......
  • 12、elk的使用(2)
    12.8、收集日志:因为logstash安装在从节点上,所以这里收集的主要是从节点上的服务日志;1、收集系统日志:(1)配置文件:vim/etc/logstash/conf.d/system-log.confinput{file......
  • android hook之ELF hook
    android平台的ELFhook技术LD_PRELOADhooklinker程序在对elf可执行程序进行重定位时会根据so库加载的顺序去寻找对应导出符号。利用LD_PRELOAD优先加载自定义的so库并......