el-cascader一级目录无checkbox，其他级目录父级勾选只展示父级，子级没有全部勾选，展示子级

根据公司业务需求，需要实现第一级目录无法勾选，其他级目录父级目录勾选则只展示父级名称，子级没有全部勾选，展示子级勾选的子集

想写这篇文章的目的是因为，在没有阅读源码之前感觉有点难，觉得要重写组件，但是阅读源码之后就可以比较容易地做到，所以希望大家有事没事可以多看看源码

看代码会有点乱，等有时间会整理案例的

效果图

html部分

 <el-form-item label="职位类型：" prop="position_type_obj">

          <el-cascader

            ref="cascader"

            v-model="publishForm.position_type_obj"

            popper-class="cascaderParent"

            :disabled="editDisable"

            placeholder="请选择职位类型"

            :options="potionType"

            :props="props"

            clearable

            :show-all-levels="false"

            @change="changedata"

          />

        </el-form-item>

第一级目录不显示 通过css做到

.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-checkbox {

display: none;

}

js

 // 获取数据

created() {

this.getPositionType();

},

获取数据方法

async getPositionType() {

  const res = await positionType();

  if (res.code === 200) {

    this.potionType = res.data;

    this.$nextTick(() => {

      this.custCascader() // 重点  去重写cascader里面地方法

    })

  }

},

// 重写 cascader里面地方法

custCascader() {

  // 当前级联选择器组件

  const cascader = this.$refs.cascader

  cascader.computePresentTags = () => {

    const { isDisabled, leafOnly, showAllLevels, separator, collapseTags } = cascader;

    const checkedNodes = cascader.getCheckedNodes(leafOnly);

    const tags = [];

    const genTag = node => ({

      node,

      key: node.uid,

      text: node.getText(showAllLevels, separator),

      hitState: false,

      closable: !isDisabled && !node.isDisabled

    });

    if (checkedNodes.length) {

      const [first, ...rest] = checkedNodes;

      const restCount = rest.length;

      tags.push(genTag(first));

      if (restCount) {

        if (collapseTags) {

          tags.push({

            key: -1,

            text: `+ ${restCount}`,

            closable: false

          });

        } else {

          rest.forEach(node => tags.push(genTag(node)));

        }

      }

    }

    tags.forEach((element) => {

      const { text, currentId } = this.returnTags(element);

      element["text"] = text;

      element["currentId"] = currentId;

    });

    var obj = {};

    const presentTags = tags.reduce(function(item, next) {

      obj[next.currentId]

        ? ""

        : (obj[next.currentId] = true && item.push(next));

      return item;

    }, []);

    cascader.presentTags = presentTags;

    cascader.checkedNodes = checkedNodes;

    console.log(tags, checkedNodes)

  }

  // const _this = this

  cascader.deleteTag = function(index) {

    const presentTags = cascader.presentTags

    const delData = presentTags[index]

    const val = delData.node.getValueByOption()

    if (delData.node.data.pid === delData.currentId) {

      let ids = delData.node.parent.getValueByOption()

      ids = ids.join(",")

      // 删除的是父节点

      console.log("del tag1", delData, val)

      const checkedValue = cascader.checkedValue

      // var val = checkedValue[index];

      cascader.checkedValue = checkedValue.filter(function(n, i) {

        console.log(n.join(","), n.join(",").includes(ids))

        return !(n.join(",").includes(ids));

      });

    } else {

      const checkedValue = cascader.checkedValue

      cascader.checkedValue = checkedValue.filter(function(n, i) {

        return n.join(",") !== val.join(",");

      });

    }

    cascader.$emit('remove-tag', val);

  }

},

// returnTags 是数据转化 判断子节点是否权限 而在返回在input框需要显示的标签

returnTags(ele) {

  const pNode = ele.node.parent;

  const isSelectAll = pNode.children.every((item) => item.checked);

  let showNode = ele.node;

  if (isSelectAll) {

    showNode = pNode;

  }

  return {

    text: showNode.label,

    currentId: showNode.data.id

  };

},

// 初始化选中的数据

changedata(params) {

  console.log("change:", params)

  setTimeout(() => {

    var tags = this.$refs.cascader.presentTags;

    tags.forEach((element) => {

      const { text, currentId } = this.returnTags(element);

      element["text"] = text;

      element["currentId"] = currentId;

    });

    var obj = {};

    tags = tags.reduce(function(item, next) {

      obj[next.currentId]

        ? ""

        : (obj[next.currentId] = true && item.push(next));

      return item;

    }, []);

    // console.log("showTag", tags)

    tags.forEach(item => {

      console.log(item.text, item.node.getValueByOption())

    })

    this.$refs.cascader.presentTags = tags;

    console.log("aaaa :", this.$refs.cascader.presentTags)

    this.$forceUpdate();

    this.publishForm.position_type = chooseJqfl(params);

    // 表单出库

    this.$refs.publishForm.validateField("position_type_obj");

  }, 100);

}