Vuejs :表行中的建议组件

<template>
  <div>
    <table>
      <tr v-for="(item, index) in items" :key="index">
        <td>
          <input
            type="text"
            v-model="item.value"
            @input="updateSuggestions(item)"
            @focus="showSuggestions(item)"
            @blur="hideSuggestions(item)"
          />
          <ul v-if="item.showSuggestions">
            <li v-for="(suggestion, idx) in item.suggestions" :key="idx" @click="selectSuggestion(item, suggestion)">
              {{ suggestion }}
            </li>
          </ul>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { value: '', suggestions: [], showSuggestions: false },
        // ...其他行
      ],
      allSuggestions: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'] // 示例建议列表
    };
  },
  methods: {
    updateSuggestions(item) {
      // 根据输入值过滤建议列表
      item.suggestions = this.allSuggestions.filter(suggestion =>
        suggestion.toLowerCase().startsWith(item.value.toLowerCase())
      );
    },
    showSuggestions(item) {
      item.showSuggestions = true;
    },
    hideSuggestions(item) {
      setTimeout(() => {
        item.showSuggestions = false;
      }, 200); // 延迟隐藏以避免点击建议项时立即消失
    },
    selectSuggestion(item, suggestion) {
      item.value = suggestion;
      item.suggestions = [];
      item.showSuggestions = false;
    }
  }
};
</script>

<style>
/* 样式可以根据需要进行调整 */
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}

li {
  padding: 8px;
  cursor: pointer;
}

li:hover {
  background-color: #f0f0f0;
}
</style>