使用 Vue.js 和 Ant Design 实现图书类型搜索功能

这段代码使用 Vue.js 和 Ant Design 库实现了图书类型搜索功能。它包含一个输入框和一个树形结构，用来帮助用户搜索和浏览图书类型。

• 输入框： <a-input-search> 组件用于输入搜索关键字。
  • style='margin-bottom: 7px' 设置了输入框的底部边距。
  • placeholder='搜索图书类型' 设置了输入框的占位符文字。
  • v-model='bookName' 将输入框的值绑定到 bookName 数据变量。
  • @keyup.enter='searchBookType' 监听输入框的回车键按下事件，并调用 searchBookType 方法。
  • @change='searchBookType' 监听输入框失去焦点事件，并调用 searchBookType 方法。
• 树形结构： <a-tree> 组件用于展示图书类型树形结构。
  • :showLine='true' 设置树形结构显示连线，用于展示节点之间的层级关系。
  • :tree-data='treeData' 将树形结构数据绑定到 treeData 数据变量。

代码中，用户可以通过输入关键字并按下回车键或失去焦点来触发搜索操作。搜索结果会显示在树形结构中，每个节点代表一个图书类型。节点之间的连线表示它们之间的层级关系。v-model 指令用于绑定输入框的值，而 @keyup.enter 和 @change 监听了输入框的事件。a-tree 组件通过 treeData 属性展示树形结构。