element Cascader 实现选择一级二级隐藏多选框实现只有第三级可多选

最新推荐文章于 2024-01-29 12:00:00 发布

滋滋冒you

最新推荐文章于 2024-01-29 12:00:00 发布

阅读量1.1k

点赞数 2

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/jt15881622410/article/details/131175213

版权

该代码示例展示了如何在Vue.js应用中使用el-cascader组件来处理区域选择。组件配置了点击触发展开、可清空、标签折叠等特性，并在值改变时进行详细的数据对比和处理。同时，用CSS隐藏了一级和二级的复选框。

摘要由CSDN通过智能技术生成

<template>
  <div id="index" class="flex_direction_box">
    <el-cascader
      ref="myCascader"
      expand-trigger="click"
      v-model="areaDropValue1"
      :options="district"
      :props="areaProps1"
      clearable
      collapse-tags
      popper-class="disableFirstAndSecondLevel"
      @change="areaDropChange1"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      district: [
        {
          v: "1",
          n: "北京",
          c: [
            {
              v: "2816",
              n: "密云区",
              c: [
                { v: "6667", n: "城区" },
                { v: "2862", n: "城区以外" },
              ],
            },
            {
              v: "72",
              n: "朝阳区",
              c: [
                { v: "2819", n: "三环到四环之间" },
                { v: "2839", n: "四环到五环之间" },
                { v: "2840", n: "五环到六环之间" },
                { v: "4137", n: "管庄" },
                { v: "4139", n: "北苑" },
                { v: "4211", n: "定福庄" },
                { v: "2799", n: "三环以内" },
              ],
            },
          ],
        },
      ],
      areaProps1: {
        label: "n",
        value: "v",
        children: "c",
        multiple: true,
        checkStrictly: true,
      },
      shareScopeEnd: [],
    };
  },
  methods: {
    areaDropChange1(val) {
      console.log(
        val,
        this.areaDropValue1,
        this.$refs.myCascader.getCheckedNodes()
      );
      let changeFlag = false;
      let changeItem = null;
      if (this.shareScopeEnd.length == 0) {
        this.areaDropValue1 = val;
      } else {
        //与原数组比对
        this.areaDropValue1.forEach((item) => {
          if (item[0] !== this.shareScopeEnd[0][0]) {
            //一级标签不同
            changeFlag = true;
            changeItem = item;
          } else if (item[1] !== this.shareScopeEnd[0][1]) {
            //一级标题相同但二级标签不同
            changeFlag = true;
            changeItem = item;
          } else if (
            (!item[2] && this.shareScopeEnd[0][2]) ||
            (item[2] && !this.shareScopeEnd[0][2])
          ) {
            //一二极相同三级不同或从无到有
            changeFlag = true;
            changeItem = item;
          }
        });
      }
      if (changeFlag) {
        this.areaDropValue1 = [];
        this.areaDropValue1.push(changeItem);
      }
      this.shareScopeEnd = this.areaDropValue1;
    },
  },
};
</script>

<style lang="scss">
.disableFirstAndSecondLevel{
  .el-cascader-panel {
    .el-scrollbar:first-child {
      .el-checkbox {
        display: none !important;
      }
    }
    .el-scrollbar:nth-child(2) {
      .el-checkbox {
        display: none !important;
      }
    }
  }
}
</style>