vue实现级联选择

Vue 实现级联选择的方法

使用 Element UI 的 Cascader 组件

Element UI 提供了 el-cascader 组件，支持级联选择功能。以下是一个基本示例：

<template>
  <el-cascader
    v-model="selectedOptions"
    :options="options"
    @change="handleChange"
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'province1',
          label: 'Province 1',
          children: [
            {
              value: 'city1',
              label: 'City 1'
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
};
</script>

使用 Ant Design Vue 的 Cascader 组件

Ant Design Vue 也提供了 a-cascader 组件，使用方法类似：

<template>
  <a-cascader
    v-model:value="selectedOptions"
    :options="options"
    @change="handleChange"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'province1',
          label: 'Province 1',
          children: [
            {
              value: 'city1',
              label: 'City 1'
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
};
</script>

自定义级联选择组件

如果需要完全自定义级联选择功能，可以通过递归组件实现：

<template>
  <div>
    <select v-model="selectedLevel1" @change="loadLevel2">
      <option v-for="item in level1" :value="item.id">{{ item.name }}</option>
    </select>
    <select v-model="selectedLevel2" @change="loadLevel3">
      <option v-for="item in level2" :value="item.id">{{ item.name }}</option>
    </select>
    <select v-model="selectedLevel3">
      <option v-for="item in level3" :value="item.id">{{ item.name }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      level1: [],
      level2: [],
      level3: [],
      selectedLevel1: null,
      selectedLevel2: null,
      selectedLevel3: null
    };
  },
  mounted() {
    this.loadLevel1();
  },
  methods: {
    loadLevel1() {
      // 加载第一级数据
    },
    loadLevel2() {
      // 根据 selectedLevel1 加载第二级数据
    },
    loadLevel3() {
      // 根据 selectedLevel2 加载第三级数据
    }
  }
};
</script>

异步加载数据

对于数据量大的场景，可以使用异步加载：

<template>
  <el-cascader
    v-model="selectedOptions"
    :props="props"
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          // 根据 level 和 node.value 异步加载数据
          setTimeout(() => {
            const nodes = Array.from({ length: level + 1 })
              .map(item => ({
                value: Math.random(),
                label: `Option - ${Math.random()}`,
                leaf: level >= 2
              }));
            resolve(nodes);
          }, 1000);
        }
      }
    };
  }
};
</script>

注意事项

• 数据格式需要符合组件要求，通常包含 value、label 和 children 字段
• 对于多选级联，可以设置 props.multiple = true
• 可以通过 CSS 自定义样式
• 异步加载时注意处理加载状态和错误情况