美文网首页让前端飞Web前端之路
element联级选择器 父子节点不互相关联 解决方案

element联级选择器 父子节点不互相关联 解决方案

作者: 小北酱丶 | 来源:发表于2020-03-11 09:46 被阅读0次
      mounted() {
        //父级下拉框 扩大选择区域
        setInterval(function() {
          document.querySelectorAll(".el-cascader-node__label").forEach(el => {
            el.onclick = function() {
              if (this.previousElementSibling) this.previousElementSibling.click();
            };
          });
        }, 1000);
      },
    

    然后样式做修改 --记得要全局改 不然改不动

    .el-radio__input {
      display: none;
    }
    
    例子:
    <template>
        <!-- 创建班级管理 -->
      <d2-container class="majorCss">
          <el-form label-position="right" label-width="6em" >
            <el-form-item label="班级名称">
              <el-input v-model="createData.place_name" placeholder="请输入班级名称"></el-input>
            </el-form-item>
            <el-form-item label="父级" >
                <el-cascader 
                :options="placeList" 
                :props="majorProps" 
                v-model="parentId" 
                :show-all-levels="false"
                placeholder="请选择父级"
                ></el-cascader>
            </el-form-item>
            <el-button
              size="default"
              @click="saveBtn"
              type="primary"
              class="button-login edit-loginBtn">
              保存
            </el-button>
          </el-form>
      </d2-container>
    </template>
    
    <script>
    import { createSystemPlace, getPlacesList } from "@/api/sys.login";
    import { mapState, mapActions } from "vuex";
    export default {
      name: "base-config-job-title-create",
      computed: {
        ...mapState("d2admin/page", [
          "current" //用户获取当前页面的地址,用于关闭
        ])
      },
      data() {
        return {
          parentId: [0], //父级默认选项
          //当前新增信息
          createData: {
            place_name: "",
            parent_id: 0,
          },
          placeList: [], //父级列表
          majorProps: {
            children: "_child",
            label: "place_name",
            value: "place",
            checkStrictly: true
          }
        };
      },
      created() {
        this.getplaceListData();
      },
      mounted() {
        //父级下拉框 扩大选择区域
        setInterval(function() {
          document.querySelectorAll(".el-cascader-node__label").forEach(el => {
            el.onclick = function() {
              if (this.previousElementSibling) this.previousElementSibling.click();
            };
          });
        }, 1000);
      },
      methods: {
        ...mapActions("d2admin/page", ["close"]),
        //获取父级列表
        getplaceListData() {
          getPlacesList().then(res => {
            let data = {
              place: 0,
              place_name: "根级"
            };
            this.placeList = res;
            this.placeList.unshift(data);
          });
        },
        //保存
        saveBtn() {
          if (this.createData.place_name == "") {
            this.$message.error("班级名称不能为空");
            return;
          }
          if (this.parentId.length > 1) {
            let data = this.parentId.pop();
            this.createData.parent_id = parseInt(data);
          } else {
            this.createData.parent_id = parseInt(this.parentId.join());
          }
          createSystemPlace(this.createData).then(res => {
            this.$message({
              message: "添加成功",
              type: "success"
            });
            //这里需要关闭当前tab页
            let tagName = this.current;
            this.close({ tagName });
          });
        }
      }
    };
    </script>
    
    <style  lang="scss">
    .majorCss {
      .el-input {
        width: 316px;
      }
      .button-login {
        margin-left: 86px;
      }
    
      
    }
    .el-cascader-node {
      .el-radio__input {
        display: none ;
      }
    }
    </style>
    
    

    从网上找来的 非原创

    相关文章

      网友评论

        本文标题:element联级选择器 父子节点不互相关联 解决方案

        本文链接:https://www.haomeiwen.com/subject/ignfjhtx.html