Vue和Element-UI级联下拉框搜索功能

<template>
  <el-cascader
    v-model="value"
    :options="filteredOptions"
    :props="props"
    @change="handleChange"
    placeholder="请选择"
  />
  <el-input v-model="searchKeyword" placeholder="搜索" @input="handleSearch"></el-input>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const options = [
      // 你的级联数据
      {
        value: '1',
        label: '选项1',
        children: [
          { value: '1-1', label: '选项1-1' },
          { value: '1-2', label: '选项1-2' }
        ]
      },
      // ...更多数据
    ];

    const props = {
      value: 'value',
      label: 'label',
      children: 'children'
    };

    const value = ref([]);
    const searchKeyword = ref('');
    const filteredOptions = computed(() => {
      if (!searchKeyword.value) return options;
      return filterOptions(options, searchKeyword.value);
    });

    const filterOptions = (options, keyword) => {
      return options.map(item => ({
        ...item,
        children: item.children ? filterOptions(item.children, keyword) : undefined
      })).filter(item => item.label.includes(keyword) || (item.children && item.children.length > 0));
    };

    const handleChange = (value) => {
      console.log(value);
    };

    const handleSearch = () => {
      // 可以在这里添加防抖处理，避免频繁搜索
    };

    return {
      options,
      props,
      value,
      searchKeyword,
      filteredOptions,
      handleChange,
      handleSearch
    };
  }
};
</script>