草庐IT

完美解决el-cascader回显失败问题

深拥i小褚 2023-07-27 原文

项目场景:

项目场景:接手了一些老项目,需要做一些日志相关的操作,从后台日志跳转到相应页面要带上原来的请求参数,涉及到一个回显问题


问题描述

Element-UI的 <el-cascader /> 这个组件,赋值之后它不会回显!而且后端返回的值只有最后一级的id,可是一个劲看文档、找资料浪费大半天,所以总结了一个比较完美的办法


原因分析:

value 属性才是回显的关键,只有绑定了value属性才会让 <el-cascader /> 回显(单选情况下是一维数组、多选是二维数组),而且数组中的值一定是最后一级的id加上它父级的id组成

在这里放一下模拟的数据

depart_check: [],
options: [
	{
	    value: 1,
	    label: '东南',
	    children: [
	    	{
		        value: 11,
		        label: '上海',
		        children: [{
		            value: 111,
		            label: '黄浦区'
		        }, {
		            value: 112,
		            label: '静安区'
		        }, {
		            value: 113,
		            label: '虹口区'
		        }, {
		            value: 114,
		            label: '长宁区'
		        }]
		    }, {
		        value: 12,
		        label: '江苏',
		    }, {
		        value: 13,
		        label: '浙江',
		    }
	    ]
	}, 
	{
	    value: 2,
	    label: '西北',
	    children: [{
	        value: 21,
	        label: '陕西',
	    }, {
	        value: 22,
	        label: '新疆维吾尔族自治区',
	    }]
	}
]

解决方案:

由于后端返回来的只有最后一级的id,所以我们需要写一个递归来拿到最后一级id和它父级id的数组
废话不多说直接上代码

/*
* @param  list 数据列表
* @param  id 后端返回的id
**/
getParentsById(list, id) {
    for (let i in list) {
        if (list[i].value == id) {
            //查询到就返回该数组对象的value
            return [list[i].value]
        }
        if (list[i].children) {
            let node = this.getParentsById(list[i].children, id)
            if (node !== undefined) {
                //查询到把父节把父节点加到数组前面
                node.unshift(list[i].value)
                return node
            }
        }
    }
},

方法有了之后就开始解决问题

一、多选赋值回显

因为多选的时候绑定的value是个二维数组
比如随便选俩,change事件拿到的值就是[[1,11,111], [1,12] ]

// 选择单位
  handlechangedepatt(v) {
  	  console.log(v)
      this.depart_check = v
  },


因为后端只会返回来111、12两个值还是字符串格式"111,12",所以处理开始

	let _depart_check = data.depart_id ? data.depart_id.split(",").map(i => Number(i)) : []
	let _arr = []
	// 使用上面写的方法 getParentsById 找出父级id并组合
	_depart_check && _depart_check.map(i => _arr.push(this.getParentsById(this.options, i)))
	console.log("_arr: ",_arr)
	this.depart_check = _arr

控制台打印拿到的_arr,完美和change事件里拿到的值是一个格式,这样回显就完成了

这里有一个小问题就是,拿到的id可能很多个,getParentsById方法只能一个一个找父级id,所以需要依次获取

二、单选赋值回显

方法和多选类似,因为单选change选中的值是一位数组,比如:[ 1,11,111 ]所以当拿到后端id之后不需要太多处理,只需要根据id和数据拿到一个一维数组的数据就行了,就不多解释了

	let _depart_check = data.depart_id || ""
	let _arr = []
	_arr = this.getParentsById(this.options, _depart_check )
	this.depart_check = _arr

总结

以上就是el-cascader回显失败的解决办法,可能有些小地方不够严谨,但是大问题得到了解决。

感谢

getParentsById方法有参考 爱吃蛋炒饭加蛋 大哥的帖子 js递归查询id所对应的节点,查询该节点的父节点,查询该节点的所有子节点
新定义定义一个 _arr是因为直接map赋值是不生效的,这里有参考 i_am_a_div_日积月累_ 大哥的帖子 el-cascader回显失败;el-cascader回显不出来

有关完美解决el-cascader回显失败问题的更多相关文章

  1. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库,所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  2. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  3. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止,这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  4. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题,我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  5. ruby - 即使失败也继续进行多主机测试 - 2

    我已经构建了一些serverspec代码来在多个主机上运行一组测试。问题是当任何测试失败时,测试会在当前主机停止。即使测试失败,我也希望它继续在所有主机上运行。Rakefile:namespace:specdotask:all=>hosts.map{|h|'spec:'+h.split('.')[0]}hosts.eachdo|host|begindesc"Runserverspecto#{host}"RSpec::Core::RakeTask.new(host)do|t|ENV['TARGET_HOST']=hostt.pattern="spec/cfengine3/*_spec.r

  6. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  7. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java,并成功地将它与另一个Java包一起使用,但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

  8. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章? - 2

    我意识到这可能是一个非常基本的问题,但我现在已经花了几天时间回过头来解决这个问题,但出于某种原因,Google就是没有帮助我。(我认为部分问题在于我是一个初学者,我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI,但我仍然停留在这个问题上.我找到了一些关于多态关系的信息,但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  9. 屏幕录制为什么没声音?检查这2项,轻松解决 - 2

    相信很多人在录制视频的时候都会遇到各种各样的问题,比如录制的视频没有声音。屏幕录制为什么没声音?今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音,你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音,屏幕录制为什么没声音?如果当时没有打开音频录制,则录制好的视频是没有声音的。因此,建议在录制前进行检查。屏幕上没有声音,很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音,即可录制音频和图画同步视频。操作方法:步骤1:点击电脑屏幕右下侧的“小喇叭”图案,在上方的选项中,选择“声音”。 步骤2:在“声

  10. 【高数】用拉格朗日中值定理解决极限问题 - 2

    首先回顾一下拉格朗日定理的内容:函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数,那么至少存在一个,使得:通过这个表达式我们可以知道,f(x)是函数的主体,a和b可以看作是主体函数f(x)中所取的两个值。那么可以有,  也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法: 外层函数f(x)是一致的,并且h(x)和g(x)是等价无穷小。此时,利用拉格朗日定理,将原式替换为 ,再进行求解,往往会省去复合函数求极限的很多麻烦。使用要注意:1.要先找到主体函数f(x),即外层函数必须相同。2.f(x)找到后,复合部分是等价无穷小。3.要满足作差的形式。如果是加

随机推荐