element的Cascader 级联选择器的使用及回显
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()
好啦，分享到此为止，希望你能用上哦，有错也欢迎指正，谢谢大家啦~~~✿✿ヽ(°▽°)ノ✿