Element Plus穿梭框自定义左边一个搜索框

Element Plus中的穿梭框（El-Cascader），是一个用于多级选择的组件，它允许用户从下拉列表逐步选择层级结构的数据。如果你想要在Element Plus的穿梭框左侧自定义添加一个搜索框，通常你可以通过以下步骤操作：

1. **配置穿梭框**：
首先，在Vue项目中引入Element Plus的Cascader组件，并按照官方文档创建基本的穿梭框实例。

<template>
  <el-cascader
    v-model="selectedValue"
    placeholder="请选择分类"
    :options="categories"
    lazy
    @change="handleChange"
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: [],
      categories: [], // 这里是你加载数据的地方
    };
  },
  methods: {
    handleChange(value) {
      console.log('值改变：', value);
    },
  },
};
</script>

2. **添加搜索框**：
在模板上添加一个独立的搜索框，比如使用`el-input`组件。当输入内容发生变化时，动态过滤数据选项。

<template>
  <div>
    <el-input
      v-model="searchText"
      clearable
      @input="filterCategories"
      placeholder="搜索..."
    ></el-input>
    <el-cascader ref="cascader" :options="filteredCategories" />
  </div>
</template>

...
</script>

3. **筛选数据**：
在JavaScript中编写`filterCategories`方法，根据搜索文本匹配并更新`filteredCategories`数组。

methods: {
  filterCategories(e) {
    this.filteredCategories = this.categories.filter(
      (category) =>
        category.label.includes(e.target.value) || // 搜索标签名
        category.children?.some((child) => child.label.includes(e.target.value)) // 如果有子项，搜索子项
    );
  },
},

这样，每当你在搜索框输入时，穿梭框下的选项就会根据输入的内容实时过滤显示。