Element UI 下拉选择树父子脱离关系后仅能选择其中一级

标签：yjywdmTree ++ 后仅 value Element length UI 节点 children

<el-form-item label="业务类型">
      <el-tree-select
        @check-change="CheckBoxClick"
        v-model="ywdm"
        :data="yjywdmTree"
        :cache-data="defaultShowCode"
        :render-after-expand="false"
        style="width: 100%"
        multiple
        check-strictly="true"
        show-checkbox
        max-collapse-tags="2"
        @change="CallGetYWDM"
      ></el-tree-select>
    </el-form-item>

js代码

<script>
import axios from "@/request/index";
export default {
  name: "AlarmYwdm",
  data() {
    return {
      ywdm: [], //业务代码
      ywmc: "", //业务名称
      defaultShowCode: "",
      WorkTopUrl: this.$root.WorkTopUrl,
      yjywdmTree: [],
      allData: [],
    };
  },
  methods: {
    GetYJYWDMTree() {
      var _thant = this;
      //获取业务类型树的数据
      axios
        .post(`${this.WorkTopUrl}/api/Worktop/GetYJYWDMTree`, {})
        .then(function (res) {
          var rdata = res.data;
          if (rdata.length > 0 && rdata[0].id == "-1") {
            _thant.allData = res.data;
            _thant.yjywdmTree.push({
              label: rdata[0].name,
              value: rdata[0].id,
              pid: rdata[0].pId,
              children: [],
              disabled: false,
              isLeaf: true,
            });

            _thant.GetYJYWDMChild(_thant.yjywdmTree[0]);
            for (var i = 0; i < _thant.yjywdmTree[0].children.length; i++) {
              _thant.GetYJYWDMChild(_thant.yjywdmTree[0].children[i]);
            }
          }
        });
    },
    GetYJYWDMChild(treeObj) {
      if (this.allData.length > 0) {
        for (var i = 0; i < this.allData.length; i++) {
          if (
            treeObj.value == "-1" &&
            this.allData[i].pId == treeObj.pid &&
            this.allData[i].id != "-1"
          ) {
            treeObj.children.push({
              label: this.allData[i].name,
              value: this.allData[i].id,
              pid: this.allData[i].pId,
              disabled: false,
              children: [],
            });
          } else if (
            treeObj.value != "-1" &&
            this.allData[i].pId == treeObj.value
          ) {
            treeObj.children.push({
              label: this.allData[i].name,
              value: this.allData[i].id,
              pid: this.allData[i].pId,
              disabled: false,
              children: [],
            });
          }
        }
      }
    },
    getCheckVal() {//获取当前选中的业务类型，一般用于父页面调取
      return this.ywdm;
    },
    CallGetYWDM() {//发生变更后，通知父页面
      this.$emit("ShowYWDM");
    },
    CheckBoxClick(d1, d2) {
      // var d2 = false;
      // if (checkkey.checkedKeys.length == 0) {
      //   d2 = false;
      // } else {
      //   d2 = true;
      // }

      console.log(d1);
      var trimVal = d1.value.replace(/(0+)$/g, "");
      var Havebrother = 0;
      var HaveParent = 0;
      if (d2 == true) {
        //如果是选中操作
        if (d1.value != "-1") {
          //如果不为顶级节点
          this.yjywdmTree[0].disabled = "true"; //则顶级节点设为禁用

          if (trimVal.length == 3 || trimVal.length == 4) {
            //如果为三级节点
            var thisPid = d1.pid; //当前选中节点的父id
            for (let i = 0; i < this.yjywdmTree[0].children.length; i++) {
              if (this.yjywdmTree[0].children[i].value == thisPid) {
                //如果当前选中节点的父id==二级节点的id，则二级节点禁用
                this.yjywdmTree[0].children[i].disabled = true;
              }
            }
          }
          if (trimVal.length == 2) {
            //如果是勾选二级节点
            for (let i = 0; i < this.yjywdmTree[0].children.length; i++) {
              if (this.yjywdmTree[0].children[i].value == d1.value) {
                //匹配下拉树，当前二级节点下面的三级节点设为禁用。
                for (
                  let j = 0;
                  j < this.yjywdmTree[0].children[i].children.length;
                  j++
                ) {
                  this.yjywdmTree[0].children[i].children[j].disabled = true;
                }
              }
            }
          }
        }
      } else if (d2 == false) {
        //如果是取消勾选
        if (trimVal.length == 3 || trimVal.length == 4) {
          //，操作三级，如果去除后面0后，业务代码长度为3或者4，则判断是否有同级别被选中，如果没有，则自己的父级取消禁用
          var dstrEnd = d1.value.substr(0, 2);
          var thisChildState = 0;
          for (let i = 0; i < this.ywdm.length; i++) {
            var childTrim = this.ywdm[i].substr(0, 2);
            if (dstrEnd == childTrim && d1.value != this.ywdm[i]) {
              thisChildState++;
              Havebrother++;
            }
            if (dstrEnd != childTrim) {
              //如果除了自己父级外，有其他父级被选中，则HaveParent+1，用于判断是否取消顶级节点是否取消禁用。
              HaveParent++;
            }
          }
          if (thisChildState == 0) {
            //如果没有兄弟节点被选中则取消父级禁用状态
            for (let i = 0; i < this.yjywdmTree[0].children.length; i++) {
              if (d1.pid == this.yjywdmTree[0].children[i].value) {
                this.yjywdmTree[0].children[i].disabled = false;
              }
            }
          }
        }
        if (trimVal.length == 2) {
          //如果是操作二级，这把自己子集的禁用选项去除
          for (let i = 0; i < this.yjywdmTree[0].children.length; i++) {
            if (d1.value == this.yjywdmTree[0].children[i].value) {
              for (
                let j = 0;
                j < this.yjywdmTree[0].children[i].children.length;
                j++
              ) {
                this.yjywdmTree[0].children[i].children[j].disabled = false;
              }
            }
          }
          //判断是否存在同为二级的被选中，如果存在除自己外的二级被选中则二级节点标识+1；
          for (let i = 0; i < this.ywdm.length; i++) {
            var parstr = this.ywdm[i].substr(0, 2);
            if (parstr != trimVal) {
              HaveParent++;
            }
          }
        }
      }
      //如果不存在勾选的二级节点，三级节点，并且是取消勾选操作，则去除顶级节点及所有二级节点的禁用属性。
      if (HaveParent == 0 && d2 == false && Havebrother == 0) {
        this.SetParentCheckState();
      }
      console.log(d2);
      console.log(HaveParent);
      console.log(Havebrother);
    },
    SetParentCheckState() {
      this.yjywdmTree[0].disabled = false;
      for (let i = 0; i < this.yjywdmTree[0].children.length; i++) {
        this.yjywdmTree[0].children[i].disabled = false;
      }
    },
  },
  mounted: function () {
    this.GetYJYWDMTree();
  },
};
</script>
<style>
/*使文本框内的选中项在一排显示，不换行*/
.el-select__tags {
  white-space: nowrap;
  overflow: hidden;
}
</style>

数据格式：

效果：

标签：yjywdmTree,++,后仅,value,Element,length,UI,节点,children
From： https://www.cnblogs.com/Lynnyin/p/17505315.html

Element UI 下拉选择树父子脱离关系后仅能选择其中一级

相关文章

赞助商

阅读排行