vue-json-viewer搜索到关键词打开折叠

Vue-json-viewer是一个轻量级的JavaScript库，它用于在网页上渲染JSON数据，并提供了一些交互功能，如搜索和折叠。如果你想实现在搜索框输入关键词后展开包含该关键词的节点，你可以按照以下步骤操作：

1. 首先，在你的Vue项目中安装`vue-json-viewer`，如果还没有安装，可以在控制台运行`npm install vue-json-viewer`或`yarn add vue-json-viewer`。

2. 在你的组件模板中引入并使用`VueJsonViewer`组件：

<template>
  <div>
    <input v-model="searchKeyword" placeholder="Search keyword">
    <vue-json-viewer :data="jsonData" :options="{ search: true }" @search-result="handleSearchResult"></vue-json-viewer>
  </div>
</template>

<script>
import VueJsonViewer from 'vue-json-viewer';

export default {
  components: {
    VueJsonViewer,
  },
  data() {
    return {
      jsonData: yourJsonData, // 这里替换为你的实际JSON数据
      searchKeyword: '',
    };
  },
  methods: {
    handleSearchResult(results) {
      results.forEach(result => {
        this.$refs.vueJsonViewer.toggleNode(result.path); // 使用ref引用的VueJsonViewer实例，调用toggleNode方法展开节点
      });
    },
  },
};
</script>

在这个例子中，当你在搜索框输入关键词并触发`handleSearchResult`方法时，会遍历搜索结果并调用`toggleNode`方法展开对应的节点。