VUE篇之，多级联动

第一个单选，后面多选

<template>
  <div class="Test1">
    <!-- -->
    <el-cascader v-model="selectedValues" :props="props" @change="handleChange"></el-cascader>
  </div>
</template>

<script>
let id = 0;
export default {
  name: 'ViteTest2025121Test1',

  data() {
    return {
      selectedValues: [], // 选中的值
      props: {
        multiple: true,
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          setTimeout(() => {
            const nodes = Array.from({ length: level + 2 }).map(item => ({
              value: ++id,
              label: `选项${id}`,
              leaf: level >= 2
            }));
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            // console.log(nodes);

            resolve(nodes);
          }, 100);
        }
      }
    };
  },

  methods: {
    // 选中值变化时的回调
    handleChange(value) {
      console.log('value', value);
      if (value.length === 0) {
        this.selectedValues = [];
        return;
      }
      const firstLevelPid = value[0][0];
      const isChangeFirstLevel = value.some(item => item[0] !== firstLevelPid);
      const lastLevelPid = value[value.length - 1][0];
      if (isChangeFirstLevel) {
        this.selectedValues = this.selectedValues.filter(item => item[0] === lastLevelPid);
      }
    }
  },
  mounted() {}
};
</script>

<style lang="scss">
.el-cascader-panel {
  > div:nth-child(1) {
    .el-checkbox__inner {
      // width: 14px;
      // height: 14px;
      // background-color: rgb(255, 255, 255);
      // position: relative;
      // cursor: pointer;
      // display: inline-block;
      // box-sizing: border-box;
      // border-width: 1px;
      // border-style: solid;
      // border-color: rgb(220, 223, 230);
      // border-image: initial;
      // border-radius: 100%;
      display: none;
    }
  }
}
</style>