获取 el-cascader 的输入值

问题场景

使用 el-cascader 级联选择器时，设置 filterable 可搜索选项。但怎样获取输入框的输入值呢？

解决

官方文档给出了如下事件：

其中 change 事件获取到的是选中的选项的值，如果输入值不符合选项值（即没有选中），则无法获取输入值。

那么为了获取到输入值，就只有用 blur事件，即失去焦点时获取到事件，得到输入值 e.target.value。

代码如下：

template 中

            <el-cascader
              popper-class="cls-attr-cascader"
              v-model="clsAttrForm.tag"
              :options="addAttrList"
              :show-all-levels="true"
              clearable
              filterable
              placeholder="请选择属性名（可搜索）"
              :props="{
                expandTrigger: 'hover',
                emitPath: false,
              }"
              @blur="(e) => attrTagBlur(e)"
              @change="(tag) => attrTagChange(tag)"
              :disabled="clsAttrModuleType === 'edit'"
            >
              <template v-slot:default="{ data }">
                <span :title="data.label">{{ data.label }}</span>
              </template>
              <template v-slot:empty
                >无数据，点此
                <el-button type="primary" size="mini" @click="createNewProp"
                  >新建属性</el-button
                ></template
              >
            </el-cascader>

methods 中

    attrTagBlur(e) {
      this.createParams = {
        attributeName: e.target.value,
      };
    },