<template #prepend> <el-select v-model="selectedtype" placeholder="Select" style="width: 115px"> <el-option label="全部" :value="全部" /> <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" /> </el-select> </template> <template #append> <el-button @click="getBookList()">搜索</el-button> </template> </el-input>

这段代码创建了一个带有前/后缀的输入框，其中：

- `template #prepend` 定义了输入框的前缀，即一个 `el-select` 组件。`v-model` 指令将选中的值与 `selectedtype` 变量进行双向绑定。`placeholder` 属性设置了默认选项文本为 `Select`。使用 `el-option` 组件创建了两个选项：一个 `全部` 的选项和一个循环创建的类型选项列表，其中 `v-for` 指令遍历了 `typeList` 数组，为每个选项设置了 `label` 和 `value` 属性。
- `template #append` 定义了输入框的后缀，即一个 `el-button` 按钮组件，用于触发搜索操作。`@click` 属性指定了当按钮被点击时将调用 `getBookList()` 函数。
- `el-input` 组件包含了前/后缀模板，并将输入框的值与 `keyWord` 变量进行双向绑定。