el-cascader 可手输入,怎么实现

el-cascader 是一个基于 Element UI 的级联选择器组件，它可以实现多级联动选择。el-cascader 可以通过手动输入来进行选择，具体实现如下：

1. 首先，在你的项目中引入 Element UI 和 el-cascader 组件。

2. 在你的页面中使用 el-cascader 组件，并绑定相应的数据和事件。

3. 在 data 中定义一个数组，用来存储级联选择器的选项数据。

4. 在 methods 中定义一个方法，用来处理手动输入的逻辑。可以使用 debounce 函数来控制输入的频率。

5. 在 el-cascader 组件中，设置 show-all-levels 属性为 true，这样就可以显示所有级别的选项。

6. 在 el-cascader 组件中，绑定 change 事件，当选择器的值发生变化时，触发相应的方法。

下面是一个简单的示例代码：

<template>
  <div>
    <el-cascader
      v-model="selectedOptions"
      :options="options"
      :show-all-levels="true"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'option1',
          label: 'Option 1',
          children: [
            {
              value: 'option1-1',
              label: 'Option 1-1',
              children: [
                {
                  value: 'option1-1-1',
                  label: 'Option 1-1-1'
                },
                {
                  value: 'option1-1-2',
                  label: 'Option 1-1-2'
                }
              ]
            },
            {
              value: 'option1-2',
              label: 'Option 1-2'
            }
          ]
        },
        {
          value: 'option2',
          label: 'Option 2',
          children: [
            {
              value: 'option2-1',
              label: 'Option 2-1'
            },
            {
              value: 'option2-2',
              label: 'Option 2-2'
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(value) {
      // 处理选择器值变化的逻辑
      console.log(value);
    }
  }
};
</script>

以上是一个简单的 el-cascader 组件的实现，你可以根据自己的需求进行相应的修改和扩展。