让前端飞Web前端之路

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

2020-03-11  本文已影响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>

从网上找来的 非原创

上一篇 下一篇

猜你喜欢

热点阅读