标签：parentValue 回显 refs value label item 选择器 element children
element的Cascader 级联选择器的使用及回显
element-ui组件库的Cascader 级联选择器，vue项目中经常能用到的一个组件，这次使用的是父子节点不相互关联，也就是可选择到任意一个节点，不需要强制选择到最末的一个节点，真香o(￣▽￣)ブ
在使用时候简单讲述下遇到的困难，总感觉自己老遇到奇奇怪怪的问题，一定是我太菜了/(ㄒoㄒ)/~~
先搞个图看看
- 首先我把这个组件封装了起来，页面使用的地方有点多哈
-
<template> <div class="upload_container"> <!-- 管理架构 --> <div class="odd_number"> <div class="xSelect_container"> <el-cascader style="width: calc(100% - 112px);height: 32px" filterable :value="jiagouVal" ref="cascaderHandle" :options="options" popper-class="jia_gou" :props="{ checkStrictly: true }" @focus="jiagouFocus" @change="jgTreeChange" ></el-cascader> <span style="width:112px" class="xSelect_label"> <span>管理架构：</span> </span> </div> </div> </div> </template> <script> import data from './data.json' export default { name: "Fourlevellink", components: {}, props: { jiagouVal:{ type:Array, default:()=>[] }, }, computed: {}, data() { return { options:[], jiagouName:'' }; }, watch: { jiagouVal:{ deep:true, handler:function(){ this.$refs.cascaderHandle.$refs.panel.activePath = [] this.$refs.cascaderHandle.$refs.panel.calculateCheckedNodePaths() } }, }, created() { let optionsArr = this.$jiagouDataFormat(data) optionsArr.unshift({label: '全部', value: ''}) this.options = optionsArr this.$store.commit('jiaGouData',this.options) }, methods: { jiagouFocus() { this.$refs.cascaderHandle.$refs.panel.activePath = [] this.$refs.cascaderHandle.$refs.panel.syncActivePath() }, jgTreeChange(arrVal) { this.$emit('jgTree', arrVal) this.$refs.cascaderHandle.dropDownVisible = false; }, //架构数据格式化（添加全部选项） jiagouDataFormat(data) { const res = [] if (data && data.length !== 0) { for (const item of data) { const tmp = {label: item.label, value: item.value} if (item.children.length > 0) { tmp.label = item.label tmp.value = item.value item.children.unshift({label: '全部', value: '', children: []}) tmp.children = this.jiagouDataFormat(item.children) } else { tmp.label = item.label tmp.value = item.value } res.push(tmp) } } return res } } } </script> <style lang="scss" scoped> .upload_container { width: 100%; } .odd_number { width: 24%; margin-right: 1%; height: 32px; float: left; margin-bottom: 0.65rem; & > :nth-child(4n) { margin-right: 0; } } ::v-deep .el-input--suffix .el-input__inner{ width: 100% !important; } ::v-deep .el-input__icon{ line-height: 28px !important; } ::v-deep .el-cascader{ line-height: 28px; float: right; } </style>- 接着在父组件使用
-
<template> <div class="wrapper-container"> <p>input框里可输 ：04,0401,040101或者01,0102,010202 然后点击'回显'按钮回显CascaderSelect选择器数据</p> <input v-model="value"/> <button style="color: #ccc;border: solid 1px #ccc;background: #fff;padding:4px 6px" @click="comfirm">回显</button> <CascaderSelect :jiagouVal="jiagouPropsVal" @jgTree="jgTreeSelect" /> </div> </template> <script> import CascaderSelect from './son' export default { name: "BaInqSearch", components: { CascaderSelect }, data() { return { jiagouObj:{}, jiagouPropsVal:[], value:['01','0101','010101'] }; }, created() { this.jiagouPropsVal = this.value }, methods: { comfirm(){ this.jiagouPropsVal = this.value.split(",") }, jgTreeSelect(arrVal){ this.jiagouObj = { qyCd:this.$isEmpty(arrVal[0]), bkCd:this.$isEmpty(arrVal[1]), industrys:this.$isEmpty(arrVal[2]), divisionNo:this.$isEmpty(arrVal[3]), busUnitNo:this.$isEmpty(arrVal[4]), } this.jiagouPropsVal = arrVal }, }, }; </script> <style lang="scss" scoped> @import "@/assets/css/tableCom.scss"; .wrapper-container { .control { span{ margin-left: 15px; font-weight: bolder; float: left; line-height: 30px; } } } </style>- 这是数据格式
[ { "value":"01", "label":"TTT科技", "parentValue":"0", "children":[ { "value":"0101", "label":"半导体光伏及半导体材料", "parentValue":"01", "children":[ { "value":"010101", "label":"中环", "parentValue":"0101", "children":[] } ] }, { "value":"0102", "label":"半导体显示", "parentValue":"01", "children":[ { "value":"010202", "label":"华星大尺寸", "parentValue":"0102", "children":[ { "value":"01020201", "label":"m10", "parentValue":"010202", "children":[] }, { "value":"01020202", "label":"t10", "parentValue":"010202", "children":[] } ] }, { "value":"010204", "label":"华星小尺寸", "parentValue":"0102", "children":[ { "value":"01020401", "label":"t3", "parentValue":"010204", "children":[] }, { "value":"01020402", "label":"t4", "parentValue":"010204", "children":[] } ] }, { "value":"010201", "label":"华显", "parentValue":"0102", "children":[] }, { "value":"010203", "label":"华星-其他", "parentValue":"0102", "children":[ { "value":"01020301", "label":"华睿", "parentValue":"010203", "children":[] }, { "value":"01020302", "label":"聚华", "parentValue":"010203", "children":[] } ] }, { "value":"010205", "label":"茂佳", "parentValue":"0102", "children":[] } ] }, { "value":"0103", "label":"产业金融-科技", "parentValue":"01", "children":[ { "value":"010301", "label":"TTT财资-科技", "parentValue":"0103", "children":[] }, { "value":"010302", "label":"资本-科技", "parentValue":"0103", "children":[ { "value":"01030201", "label":"TTI", "parentValue":"010302", "children":[ { "value":"0103020101", "label":"亚太石油", "parentValue":"01030201", "children":[] }, { "value":"0103020102", "label":"医疗", "parentValue":"01030201", "children":[] } ] } ] } ] }, { "value":"0104", "label":"翰林汇", "parentValue":"01", "children":[ { "value":"010401", "label":"翰林汇", "parentValue":"0104", "children":[ { "value":"01040101", "label":"翰林汇本部", "parentValue":"010401", "children":[] }, { "value":"01040104", "label":"尚派", "parentValue":"010401", "children":[] } ] } ] }, { "value":"0105", "label":"科技-其他", "parentValue":"01", "children":[ { "value":"010501", "label":"科技本部", "parentValue":"0105", "children":[ { "value":"01050101", "label":"共享中心", "parentValue":"010501", "children":[] } ] }, { "value":"010503", "label":"天津普林", "parentValue":"0105", "children":[] } ] } ] }, { "value":"04", "label":"无分类", "parentValue":"0", "children":[ { "value":"0401", "label":"无分类", "parentValue":"04", "children":[ { "value":"040101", "label":"无分类", "parentValue":"0401", "children":[] } ] } ] } ]- 好了，认真听了哦，由于需要回显数据和回显下拉菜单展开路径，所以在子组件要使用watch监听父组件传进来的值jiagouVal，虽然后每次传过来的值不一样，但是展开路径始终只是停留在第一次展开的时候，此时灵魂的两句话就来了，就是下面两句
-
//清除展开的路径（activePath存的是展开路径，不是选中的路径哦） this.$refs.cascaderHandle.$refs.panel.activePath = [] //接着就是使用calculateCheckedNodePaths重新计算展开路径了 this.$refs.cascaderHandle.$refs.panel.calculateCheckedNodePaths() -
//清除展开的路径（activePath存的是展开路径，不是选中的路径哦） this.$refs.cascaderHandle.$refs.panel.activePath = [] //展开路径和选中路径同步 this.$refs.cascaderHandle.$refs.panel.syncActivePath()
还有一个需要注意的点，如果不需要记忆上一次的展开路径需要用到下面的方法
- 这是数据格式
标签：parentValue,回显,refs,value,label,item,选择器,element,children 来源： https://www.cnblogs.com/webSnow/p/16598708.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。