首页 > 其他分享> > element的Cascader 级联选择器的使用及回显

element的Cascader 级联选择器的使用及回显

2022-08-18 15:01:34 作者：互联网

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