级联菜单入坑记

最新推荐文章于 2024-05-30 11:27:58 发布

小佩呀~

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量113

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_42769032/article/details/130380966

版权

坑1：一个list进行遍历出多个级联菜单，可任意选则一级，编辑保存，之前数据无法选中；

坑2：如果第一次选中一个，编辑时选择只有一级数据的数据无法选中；

<div v-for="(item, k) in projectInfoForm.childExtractProInfoList" :key="k">
<el-col :sm="8">
                <el-form-item label="省市区选则:" required>
                  <el-cascader
                    v-model="item.proLocationArr"
                    :options="regionOptionsArea"
                    :props="propsadd"
                    clearable
                    style="margin-right: 10px"
                    :ref="'proLocationRef' + k"
                    :popper-class="`proLocationRef${k} domicile-cascader-radio`"
                    @change="changeProLoacation($event, k)"
                    @expand-change="bindEvent(`proLocationRef${k}`)"
                  ></el-cascader>
                </el-form-item>
              </el-col>
</div>

1：可通过 props.checkStrictly = true 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。
2：ref 保证遍历出来的每个级联菜单是唯一 动态级联菜单 :ref="'proLocationRef' + k"
3：popper-class 自定义浮层类名,我这里用来去掉前边的单选按钮，点击label选中
4：expand-change：当展开节点发生变化时触发 回调参数各父级选项值组成的数组

 propsadd() {
    return { value: 'id', label: 'label', checkStrictly: true, children: 'children' };
  }
regionOptionsArea： []; 省市区三级
List:[{
proLocationArr: [] , // 编辑时回显之前选中数据
}]

  changeProLoacation(e, k) {
    console.log(e, k);
    this.$forceUpdate(); 坑1，2解决办法-强制刷新
  }

// 编辑回显
 getDeatil(){
 for (let i = 0; i < this.list.length; i++) {
            this.bindEvent(`proLocationRef${i}`); 坑1，2解决办法-回显数据          }
}

// bindEvent方法
 bindEvent(ref: string) {
    const that = this as any;
    this.$nextTick(() => {
      const popper = document.querySelector(`.${ref}`) as any;
      if (popper) {
        setTimeout(() => {
          const labelDoms = popper.querySelectorAll('.el-cascader-node .el-cascader-node__label') as any;
          const radioDoms = popper.querySelectorAll('.el-cascader-node .el-radio__inner') as any;
          if (labelDoms && labelDoms.length) {
            labelDoms.forEach((item, index) => {
              item.addEventListener('click', () => {
                radioDoms[index].click();
              });
            });
            labelDoms.forEach((item, index) => {
              item.addEventListener('dblclick', () => {
                radioDoms[index].click();
                that.$refs[ref].dropDownVisible = false;
              });
            });
          }
        }, 500);
      }
    });
  }